label
Renders an accessible label associated with controls.
Philosophy
Labels are the accessibility backbone of every form. A form control without a label is invisible to screen readers. We ship Label as a standalone component rather than baking it into every form element because composition is more flexible than configuration — you decide where the label goes and how it connects.
Installation
npx @gentleduck/cli add label
npx @gentleduck/cli add label
Usage
import { Label } from "@/components/ui/label"import { Label } from "@/components/ui/label"<Label htmlFor="email">Your email address</Label><Label htmlFor="email">Your email address</Label>API Reference
Label
Renders an accessible label element associated with form controls.
| Prop | Type | Default | Description |
|---|---|---|---|
dir | 'ltr' | 'rtl' | -- | Text direction override. Resolved via useDirection (dir prop -> DirectionProvider -> 'ltr'). |
className | string | -- | Additional class names for the label element |
htmlFor | string | -- | The id of the form element this label is associated with |
children | React.ReactNode | -- | Label text or elements |
ref | React.Ref<HTMLLabelElement> | -- | Ref forwarded to the label element |
...props | React.HTMLProps<HTMLLabelElement> | -- | Additional props to spread to the label element |
RTL Support
Direction is resolved through the shared primitives direction module. Use a local dir="rtl" override when the component exposes it, or set DirectionProvider at app/root level for global RTL/LTR behavior.