Label
shadcn/ui
Accessible label for form controls. Always pair with htmlFor matching the input id.
@/components/ui/labelStates
| State | Preview | Token / class |
|---|---|---|
| Default | text-foreground text-sm font-medium | |
| Disabled | opacity-50 cursor-not-allowed | |
| Error | text-destructive | |
| Required | text-destructive on * span |
Pairings — Label with each control type
| Preview | Control | Usage |
|---|---|---|
| Input | Text fields, email, password, search | |
| Textarea | Long descriptions, comments | |
| Checkbox | Boolean toggles, multi-select options | |
| Switch | Feature toggles, notification settings |
In context — new ticket form
New ticket
Props
| Prop | Type | Description |
|---|---|---|
| htmlFor | string | ID of the associated input — required for accessibility |
| className | string | Extend styles — e.g. text-destructive for error state |
| children | ReactNode | Label text, optionally with required * indicator |
In forms with react-hook-form, use FieldLabel from the Field component instead — it handles id wiring automatically.
On this page