Label

Accessible <label> for a single form control — click/tap forwards focus to the control and screen readers announce the name. Always pair with the control via htmlFor (or wrap both in a <label>).
Reach for Field instead when you want the full form row (label + control + help/error text wired up); use bare Label for one-off pairings like a checkbox row. The weight prop sets emphasis: medium (default) for a field label above an input, normal when secondary (e.g. beside a checkbox in a list), semibold for a stronger group heading. It auto-fades to a disabled tone when the paired control is disabled.

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