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"

<Label htmlFor="email">Your email address</Label>

RTL Support

Set the direction once with DirectionProvider (or <html dir="rtl">) and Label follows it. No dir prop needed.

Motion

Alpha: Motion Compositions

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 scaleIn entrance animation (fade, scale, and blur) with a bouncy spring transition, 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` -> `<html dir>`).
`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 a scaleIn entrance (fade, scale, and blur) with a bouncy spring transition. Requires the motion package.