Design System
Label
Labels provide accessible names for form controls. They should always be paired with inputs, selects, checkboxes, and other form elements.
Basic Usage
Labels should always be paired with form controls for accessibility. Use the htmlFor prop to associate labels with inputs.
With Input
Variants
Labels support a required variant that automatically adds an asterisk.
Default
Required
Usage
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
export function MyForm() {
return (
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="Enter your email" />
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
htmlFor | string | - | ID of the associated form control |
variant | "default" | "required" | "default" | Label variant style |
Accessibility
- Always use
htmlForto associate labels with form controls - Labels improve screen reader navigation and form usability
- Clicking a label focuses the associated form control
- Use the required variant for required fields to provide visual indication