Loading...
Loading...
> Accessible label component for form inputs with required indicator and error state support.
1import { Label } from "@/components/ui/label"
1<Label htmlFor="email">{formatLabel("Email Address")}</Label>2<Input id="email" type="email" placeholder="you@example.com" />
1<Label htmlFor="username" required>2 {formatLabel("Username")}3</Label>4<Input id="username" placeholder="Enter username" />
Password must be at least 12 characters
1<Label htmlFor="password" required error>2 {formatLabel("Password")}3</Label>4<Input5 id="password"6 type="password"7 error8/>9<p className="text-xs text-destructive">10 Password must be at least 12 characters11</p>
1<div className="flex items-center gap-2">2 <Checkbox id="terms" />3 <Label htmlFor="terms">{formatLabel("Accept terms and conditions")}</Label>4</div>
1<div className="flex items-center justify-between">2 <Label htmlFor="notifications">{formatLabel("Email Notifications")}</Label>3 <Switch id="notifications" />4</div>
1<Label htmlFor="disabled">{formatLabel("Disabled Field")}</Label>2<Input id="disabled" placeholder="Cannot edit" disabled />
1// Label uses design system typography tokens2// From mode.typography.label34text-sm // Font size (14px)5font-semibold // Font weight 6006leading-normal // Line height7tracking-normal // Letter spacing
1// UX Heuristic #5: Error Prevention2// Show required indicator to prevent form submission errors34<Label htmlFor="field" required>5 Field Name6</Label>78// Renders: Field Name *9// User knows field is required before submission
| Prop | Type | Default | Description |
|---|---|---|---|
| htmlFor | string | - | Associates label with input element by ID. |
| required | boolean | false | Shows required indicator asterisk (*). |
| error | boolean | false | Applies error styling (text-destructive). |
| className | string | - | Additional CSS classes. |
✓ Use Label when:
✗ Don't use when:
Best Practices: