Components

Label

An accessible caption for a form control, built on Radix Label — pair it with an input, checkbox, or switch to give the field a clickable, screen-reader-friendly name.

Basic usage

Connect the label to a field with htmlFor matching the control's id.

With controls

Wrap a Checkbox or Switch inside the label so the whole row becomes the click target.

Disabled field

When the associated control is disabled, the label automatically dims via the peer-disabled styles.

Props

PropTypeDefaultDescription
htmlForstring—ID of the form control this label describes. Clicking the label focuses or toggles that control.
childrenReact.ReactNode—Label text and any inline controls (e.g. a Checkbox or Switch) rendered alongside it.
classNamestring—Additional Tailwind classes to merge onto the root element.
...restLabelHTMLAttributes—All native label attributes are forwarded to the underlying element.

Accessibility

  • Renders a native <label>; an htmlFor that matches the control's id wires up the programmatic name for assistive technology.
  • Clicking the label moves focus to — or toggles — the associated input, checkbox, or switch, enlarging the hit target for pointer and touch users.
  • The component blocks text selection on double-click (select-none) so rapid clicks toggle the control instead of highlighting the caption.
  • When the paired control is disabled, the label inherits a reduced-opacity, cursor-not-allowed state so the field reads as unavailable.