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.

Email address

With controls

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

Accept terms and conditionsSubscribe to the newsletter

Disabled field

The label dims itself from the surrounding markup, and it listens on two channels. peer-disabled fires when a preceding sibling carrying the peer class is disabled — Checkbox already ships that class, so a checkbox followed by its label needs no wiring. group-data-[disabled=true] fires from an ancestor and is the one to use when the label sits above the control, where a sibling selector can never reach it.

Include archived records

API key

Props

Prop	Type	Default	Description
`htmlFor`	string	`—`	ID of the form control this label describes. Clicking the label focuses or toggles that control.
`children`	React.ReactNode	`—`	Label text and any inline controls (e.g. a Checkbox or Switch) rendered alongside it. The root is a flex row with gap-2, so children line up without extra markup.
`asChild`	boolean	`false`	Radix escape hatch — render the single child element instead of a <label>, keeping the behaviour and merging the classes.
`className`	string	`—`	Additional Tailwind classes to merge onto the root element.
`...rest`	React.ComponentProps<typeof LabelPrimitive.Root>	`—`	Every prop of Radix Label Root, and through it every native <label> attribute. The exported prop type is LabelProps.

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 — but only through one of the two channels above. A disabled control that is neither a preceding peer nor inside a marked group leaves the label at full strength.
FieldLabel from the Field family is this same component scoped to the group/field name, so it dims from <Field data-disabled="true"> rather than from the nearest unnamed group — prefer it when you are building a full form row.