Label
Associates descriptive text with form controls to improve clarity and accessibility.
Code
Installation
npx shadcn@latest add labelBasic Example
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
<div className="space-y-2">
<Label htmlFor="email">Email Address</Label>
<Input id="email" type="email" />
</div>With Checkbox
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
<div className="flex items-center space-x-2">
<Checkbox id="terms" />
<Label htmlFor="terms" className="cursor-pointer">
I agree to the terms
</Label>
</div>Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | string | "md" | Label size. Options: sm, md, lg |
| required | boolean | false | Show required indicator (*) |
| htmlFor | string | — | ID of the associated input element |
Sizes
Required Field
With Checkbox
Usage Guidelines
When to Use
Always use labels for form inputs, checkboxes, and radio buttons. Labels provide context and make forms accessible to screen readers. They also make the entire label area clickable, improving usability.
Use the required prop to indicate mandatory fields. Use appropriate sizes to create visual hierarchy in complex forms.
Best Practices
- Always associate labels with inputs using htmlFor and id
- Use clear, descriptive label text
- Add cursor-pointer class when label is clickable
- Use required prop for mandatory fields
- Keep label text concise but informative
Accessibility
Labels are essential for screen reader users. Always use htmlFor to associate labels with their inputs. When labels are clickable (like with checkboxes), add cursor-pointer class and ensure the label text clearly describes what will happen when clicked.
The required prop automatically adds a visual indicator (*) and should be used alongside aria-required for complete accessibility.