Label
An accessible label associated with controls.
Made by shadcn
Installation
Base UI migration — Label is now a plain native <label> element. The compat layer no longer wraps Radix's
Label primitive; use the standard htmlFor attribute to associate a label with its input.
Loading component...
When to use
The Label component provides accessible text labels for form controls and interactive elements. Use this decision tree to determine when it's appropriate:
Usage
<Label htmlFor="email">Your email address</Label>Props
Accessibility
- Always set
htmlForto theidof the control being labelled — clicking the label then focuses / activates the control. - For checkboxes, switches, and radios you can alternatively wrap the control inside the label (no
htmlForneeded). - The component is a plain
<label>— no keyboard interactions of its own.
Credits
- We use the native
<label>element after the Base UI migration. - We take our inspiration from Shadcn UI for the label style.
Recent changes
- patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested b…#133
- minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
- minorv1.0.0Post-Base-UI polish. Public API unchanged.#116
- majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
- minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109
Built by malinskibeniamin. The source code is available on GitHub.