Label

An accessible label associated with a form control.

$bunx shadcn@latest add @nx-ui/label
Registry item
Installs withutils
Used byauth-loginauth-signupewc-selectorfieldfilter-barisochrone-toollistings-filterslocation-selectormaterial-selectorproject-scope-selectorsettings

Basic usage

Pair a Label with a control using a matching id and htmlFor. Clicking the label focuses (or toggles) the control.

Required and optional markers

Append a marker inside the label to signal required or optional fields.

With an icon or tooltip

Label lays out as a flex row with a gap, so an icon or a help tooltip can sit inline with the text.

States: disabled and invalid

peer-disabled dims the label when its sibling control is disabled; aria-invalid on the control pairs with a destructive-coloured label.

Not a recognised European Waste Catalogue code.

Composition: movement dispatch form

Labels tying together a small group of fields for logging a waste movement between sites.

API reference

Exported parts and their props, extracted from the component source.

…extends React.ComponentProps<"label">