Label

Accessible <label> for form controls. Always pair with the control via htmlFor.

Basic

<div className="flex flex-col gap-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="you@example.com" />
</div>

With a checkbox (auto-fades when disabled)

<label className="flex items-center gap-2">
  <Checkbox className="peer" id="terms" />
  <Label htmlFor="terms" weight="normal" className="cursor-pointer">Accept terms and conditions</Label>
</label>

Props

PropType
htmlForstring
…restLabelHTMLAttributes

Source

packages/react/src/components/label.tsx