Forms
Label
A plain label, text-sm medium. Inside forms, reach for FieldLabel, which is this plus field states.
packages/design-system/components/ui/label.tsx
Examples
Anatomy
- 01Label, flex with gap-2 for an icon
Usage
import { Label } from "@repo/design-system/components/ui/label";
<Label htmlFor="company">Company</Label>
<Input id="company" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| htmlFor | string | none | The id of the control it names. |
| className | string | none | Merged last with cn(). Use it for layout (width, margin), not to restyle the component. |
Guidance
Do
- Always point it at a control with htmlFor.
Don't
- Use it as a heading.