Label
Accessible caption for a form control
Category: inputs · WCAG 2.2-AA · form, caption, accessibility
States
- default
- disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
htmlFor | string | — | Id of the form control this label is associated with. |
asChild | boolean | false | When true, renders the child element as the root via Slot, merging props (polymorphic rendering). |
required | boolean | false | When true, marks the field as required. |
disabled | boolean | false | When true, disables the control and removes it from the tab order. |
children | ReactNode | — | Content rendered inside the component. |
labels | { required?: string } | — | Overrides for the component’s user-visible strings (i18n). |
Design tokens
--cascivo-space-1--cascivo-font-sans--cascivo-text-sm--cascivo-font-medium--cascivo-leading-snug--cascivo-leading-none--cascivo-color-text--cascivo-color-destructive
When to use
- Naming a single form control (input, select, checkbox) so clicking the text focuses it
- Marking a field as required with a visible and screen-reader-announced indicator
When not to use
- Labeling a group of controls — use a <fieldset>/<legend> instead
- Static body copy that is not associated with a control — use a plain text element
How to build an accessible Label in React →
Examples
Basic
<Label htmlFor="email">Email</Label>Required
<Label htmlFor="email" required>Email</Label>asChild
Render the label semantics onto a custom element via Slot.
<Label asChild htmlFor="email"><span>Email</span></Label>