Label
Names a form control.
Installation
The CLI installs the Radix or Base UI file to match your project.
If your project doesn't have Wisty UI's theme yet, add it once with npx shadcn@latest add @wisty/cosmos. Until then, components keep shadcn's default look. Installation has the details.
When to use
Use it
- A form control needs a visible name: an input, a select, a textarea.
- You lay out a control and its label yourself, outside a Field, like a checkbox with its label beside it.
Don't use it
- The field has help text or an error. Use
FieldLabelinside a Field, which spaces them. - A group of controls needs one name, like a set of checkboxes. Use
FieldSetwith aFieldLegend. - The text names a section, not a control. Use a heading.
Usage
import { Label } from "@/components/ui/label"<Label htmlFor="account-name">Account name</Label>A Label placed after a checkbox, radio or switch, as its sibling, takes the regular weight those labels have, as the Beside a checkbox or switch example shows.
Examples
Beside a checkbox or switch
Labels placed after a `Checkbox` and a `Switch` take the regular weight and, beside the switch, a lighter color.
API reference
Label
Also takes every Radix Label.Root (opens in a new tab) prop.
SLDS mapping
Label is slds-form-element__label. After a checkbox or radio it's SLDS's checkbox label, and after a switch SLDS's toggle label. A required asterisk is slds-required. Like SLDS, it doesn't dim beside a disabled control.
Known gaps:
- SLDS's label has padding above it inside a form element. Label doesn't, so it lines up anywhere;
FieldLabeladds it.
Accessibility
- Set
htmlForto the control'sid, or wrap the control in the label. Otherwise the label names nothing. - The asterisk alone doesn't tell assistive tech a field is required. Set
requiredon the control too, as the Account fields example does.
Rules
- Label is a flex row with a gap, so put the asterisk and the text in one
span, as the Account fields example does. As separate children they sit apart. - Don't restyle the label's size, weight or color. They come from the theme, and change beside a checkbox, radio or switch.