MDK Logo

Label

Accessible text label for form controls. Associates with an input via `htmlFor` and supports a required-mark indicator. Built on Radix Label.

Accessible text label for form controls. Associates with an input via htmlFor and supports a required-mark indicator. Built on Radix Label.

import { Label } from "@tetherto/mdk-react-devkit";

Label exposes no documented props.

Usage

Accessible <label> element for form fields. Built on Radix UI Label so that clicks anywhere on the label focus the associated input.

Notes

  • Pair with Input, Select, Checkbox, Switch, etc. via htmlFor.
  • Inside an MDK <Form> use <FormLabel> instead — it auto-links to the field.

Example

/** * Runnable example for Label. */import { Input, Label } from '@tetherto/mdk-react-devkit'export const LabelExample = () => {  return (    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxWidth: 320 }}>      <Label htmlFor="email">Email</Label>      <Input id="email" type="email" placeholder="you@example.com" />    </div>  )}