Components
Label
Accessible text labels for form controls with built-in spacing, disabled styling, and peer support.
Basic Usage
Use Label to associate descriptive text with any form control via htmlFor and an id.
import { Label } from "@epilot/volt-ui"
<Label size="sm">Email address</Label>
<Label size="base">Email address</Label>
<Label size="lg">Email address</Label>Accessibility Tips
- Always connect
Labeland the input usinghtmlFor/id. - Use semantic HTML inputs so assistive tech can announce the label automatically.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "destructive" | "primary" | The visual style variant of the label. |
size | "sm" | "base" | "lg" | "base" | The size of the label. |
children | React.ReactNode | - | Content for the label. Supports inline elements like icons or status text. |
className | string | - | Additional Tailwind classes merged with the defaults. |