Labels

Usage and anatomy

Label gives a form control an accessible name. Set htmlFor to the control's matching id so selecting the label focuses or toggles that control.

import { Label } from "@acme/ui/label"

<div className="flex plumeui-wr plumeui-naa">
  <input id="notifications" type="checkbox" className="peer" />
  <Label htmlFor="notifications">Email notifications</Label>
</div>

Add the peer class to the preceding control when you want the label's built-in peer-disabled styles to reflect its disabled state.

API reference

Label

Label also accepts the native label props supported by the underlying Radix Label element.