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

PropTypeDefault
size 'sm' | 'md' | 'lg''md'
required Renders a visual required marker. This is decorative only — the control itself must still carry `required` (or `aria-required`) so assistive technology announces it.booleanfalse
class string—
children Snippet—
child bits-ui Snippet<[{ props: Record<string, unknown>; }]> | undefined—
for html string | null | undefined—
id bits-ui string | undefined—
ref bits-ui HTMLElement | null | undefined—

Plus every native <label> attribute via prop spreading. The Textarea, Input, Select and Slider components all pair with it the same way.