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>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.
Motion
Motion components work standalone, but some compositions may behave unexpectedly — this is still under active development. If you find a broken composition, please file an issue.
Use MotionLabel for a fade+blur entrance animation powered by motion. Pairs well with MotionInput for staggered form field entrance.
Requires the motion package. Use MotionLabel instead of Label. Pass index for stagger delay.
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 |
MotionLabel
Same props as Label plus an optional index prop for stagger delay (50ms per index). Adds fade+blur entrance. Requires the motion package.