Form label component with accessibility support.
| Name | Type | Default | Description |
|---|---|---|---|
| htmlFor | string | — | Associates label with form control |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| Text | color.foreground | var(--foreground) | Label text color | |
| Font Size | fontSize.sm | 0.875rem | Small text size | |
| Font Weight | fontWeight.medium | 500 | Medium weight | |
| Line Height | lineHeight.none | 1 | Tight line height |
Basic label for form inputs.
<Label>Email address</Label>
Use htmlFor to associate labels with checkboxes for better accessibility.
<div className="flex items-center gap-2">
<input type="checkbox" id="terms" />
<Label htmlFor="terms" className="cursor-pointer font-normal">
I agree to the terms and conditions
</Label>
</div>Labels work with radio button groups inside fieldsets.
<fieldset className="space-y-2">
<legend className="text-sm font-medium mb-2">Select your plan</legend>
<div className="flex items-center gap-2">
<input type="radio" id="plan-free" name="plan" value="free" />
<Label htmlFor="plan-free" className="cursor-pointer font-normal">
Free
</Label>
</div>
<div className="flex items-center gap-2">
<input type="radio" id="plan-pro" name="plan" value="pro" />
<Label htmlFor="plan-pro" className="cursor-pointer font-normal">
Pro
</Label>
</div>
</fieldset>