Connect visible text to a form control by matching the label’s htmlFor with the control’s id.
tsx
import { Checkbox } from "@/components/ui/checkbox"import { Label } from "@/components/ui/label"export function Example() { return ( <div className="flex items-center gap-2"> <Checkbox id="terms" /> <Label htmlFor="terms">Accept terms and conditions</Label> </div> )}Installation
npx @arctis-sh/@arctis-sh/ui@latest add labelUsage
import { Label } from "@/components/ui/label"<Label htmlFor="email">Your email address</Label>Basic
Match the control’s id with htmlFor on the label.
tsx
import { Checkbox } from "@/components/ui/checkbox"import { Label } from "@/components/ui/label"export function Example() { return ( <div className="flex items-center gap-2"> <Checkbox id="terms" /> <Label htmlFor="terms">Accept terms and conditions</Label> </div> )}Disabled
When the control is disabled, peer-disabled styles give the label a muted appearance.
tsx
import { Checkbox } from "@/components/ui/checkbox"import { Label } from "@/components/ui/label"export function Example() { return ( <div className="flex items-center gap-2"> <Checkbox id="terms-disabled" disabled /> <Label htmlFor="terms-disabled">Accept terms and conditions</Label> </div> )}API Reference
Label
Native <label> with support for all label HTML attributes, including htmlFor and children.
| Prop | Type | Default |
|---|---|---|
| htmlFor | string | — |
| className | string | — |
<Label htmlFor="email">Your email address</Label>