Label
A Label names a form control, and users can click its text to reach that control.
When to Use
- to name one control that has no description and no error, such as the only Input of a Dialog
- to name a control from within its edge, inside an addon of an Input Group
When Not to Use
- for a control with a description or an error (use a Field)
- to name a group of controls (use the
FieldLegendof a field set) - for a control whose name isn’t shown (set
aria-labelon the control)
The FieldLabel of a Field is this Label with the Field’s states.
States
A Label is disabled when an ancestor with the class group has data-disabled="true", or when an earlier sibling with the class peer is disabled or has data-disabled. A disabled Label can’t be clicked. A Checkbox, a radio, and a Switch have the peer class, so a Label that is placed after one of them follows its disabled state. An Input doesn’t have the class.
Behavior
When users click a Label, a text control receives focus, and a Checkbox or a Switch changes state.
The text of a Label can’t be selected. Label sets its line height to the font size, so the lines of a wrapped label touch. FieldLabel sets leading-snug instead.
Accessibility
A Label renders a native label element and can’t receive focus.
A control needs a name so that screen readers can announce it, as WCAG 2.2 SC 4.1.2 Name, Role, Value requires. To provide one,
point the Label at the control with htmlFor, or wrap the control in the Label. If the Label does neither, it names
nothing.
Installation
npx shadcn@latest add @summit/labelUsage
To place the Label 8px above its control, use gap-2. See Spacing for the step between a label and its control.
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
<div className="grid gap-2">
<Label htmlFor="client">Client name</Label>
<Input id="client" />
</div>;API Reference
Label adds no props. Its props are passed to the label element.