Label
Accessible text labels for form controls with built-in spacing, disabled styling, and peer support.
Basic Usage
Basic Label
The Label component associates descriptive text with form controls using for and id attributes.
Sizes
Label Sizes
Three size variants are available: sm, base (default), and lg.
Variants
Label Variants
Primary (default) and destructive variants for error states.
Accessibility Tips
- • Always connect Label and the input using
for/id. - • Use semantic HTML inputs so assistive tech can announce the label automatically.
Accessible Label Example
Proper association between label and input using for/id.
Choose a unique username
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "destructive" | "primary" | Visual style variant |
size | "sm" | "base" | "lg" | "base" | Label size |
for | string | - | ID of the associated form control |
class | string | - | Additional CSS classes |