Label
A native label for a form control — associated by htmlFor, dimmed with its control, and server-safe by default.
- Status
- Since
0.1.0- Accessibility pattern
- native label element
Last updated
Install
Configure registry credentials first using the Quickstart. Before copying this item or any transitive registry dependency, verify the signed manifest and save the exact bytes for Label before installation. Retain the digest printed by this command.
pnpm exec vegastack-design verify labelInstall with the pinned shadcn CLI. Bare shadcn does not verify VegaStack signature or integrity.
pnpm dlx shadcn@4.21.0 add @vegastack/labelRun the exact offline --post-write command printed by the preflight, using its saved item path and independently retained --expected-integrity digest. Use the saved preflight for every transitive registry dependency too; stop on any mismatch before using the components.
Usage
import { Label } from "@/components/ui/label";
<Label htmlFor="email">Your email address</Label>;Examples
Label in Field
For form fields, use the Field component, which composes the label, the description and the error message around a single control and associates them for you.
We only use it to send you receipts.
RTL
Label is a flex row written in logical properties, so its icon and text order mirror in a
right-to-left document without any extra work.
API Reference
Label adds no props of its own — it accepts everything the underlying element or Base UI primitive accepts (className, ref, ARIA attributes, event handlers).
Accessibility
- Renders a native
<label>. Pair it with a control throughhtmlForand the control'sid, or nest the control inside it; clicking the label then focuses or toggles the control. - A disabled control dims its label two ways:
peer-disabled:for a sibling control, andgroup-data-[disabled=true]:for a wrapper that marks the whole group disabled. select-nonestops a double-click on the label from selecting its text instead of hitting the control.- A label is not a substitute for an accessible name on an icon-only control — give that control its
own
aria-label.
| Contract | States tested |
|---|---|
| Behaviour | default, disabled |
| Accessibility | disabled, labeled, semantic-html |
| Visual | default, disabled |
Do / Don't
Deviations
Upstream's file plus packages/ui/upstream/patches/label.patch. Every hunk:
- API-16 — the
"use client"directive is removed.Labelrenders a native element and touches no React hook, so it is server-safe; the directive belongs at the lowest interactive leaf, not on a presentational element. - DOC-2 —
cnis imported from@vegastack/design, and the file carries the registry provenance header.