Label
Accessible form label.
Usage
Label wraps the Bits UI Label primitive, which owns the click-to-focus
behaviour and stops double-click text selection from leaking into the control. Point for at the control's id — that association is what gives the field its accessible
name.
Sizes
Three sizes matched to the form-control scale, so a sm label sits naturally above a sm input.
Required marker
required renders an asterisk that is aria-hidden — it is a visual affordance, nothing more. Screen readers
learn the field is required from the control's own required attribute, so set both.
Nesting the control
You can also nest the control inside the label and skip for entirely. This is the tidiest option for checkboxes and switches, where
the label text is the hit target you actually want.
Props
Plus every native <label> attribute via prop spreading. The Textarea, Input, Select and Slider components all pair with it the
same way.
| Prop | Type | Default |
|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' |
required Renders a decorative asterisk (aria-hidden). The control itself must still carry required or aria-required. | boolean | false |
for Native attribute — must match the id of the control it names. | string | — |
class Extra classes merged onto the label. | string | — |