Label

PreviewCopy Anchor Link

Click the label to focus its input. Match htmlFor to the control's unique id.

InstallationCopy Anchor Link

From a shadcn-initialized Radix project:

pnpm dlx shadcn@latest add http://127.0.0.1:3017/r/label.json

Installs the Label source and Radix Label dependency. It reuses your cn utility and existing theme without changing global CSS. Input is shown for context and is not included in this item. Use your project's existing input component.

UsageCopy Anchor Link

import { Label } from '@/components/ui/label';

<Label htmlFor="email">Email address</Label>
<input id="email" type="email" />

Use stable, unique IDs. When rendering reusable controls multiple times, React's useId() can generate the input ID and matching htmlFor together. Label renders a native label through Radix; it does not add a provider or manage field state.

Required fieldsCopy Anchor Link

Make the requirement visible in words and set required on the control. Label alone does not enforce validation. Avoid communicating the requirement with color alone.

Disabled stateCopy Anchor Link

Set disabled on the control and data-disabled="true" on the label for its visual treatment. Label has no native disabled attribute. Styling the label alone does not disable the input.

Existing peer-disabled and group-data-[disabled=true] styling remains supported. A peer must precede its label in the document for that selector to apply.

Checkbox associationCopy Anchor Link

Clicking the label toggles the associated checkbox. This example uses a native checkbox to demonstrate the Label primitive independently.

<input id="updates" type="checkbox" />
<Label htmlFor="updates">Send me product updates</Label>

Typography and accessibilityCopy Anchor Link

Labels use 14px text, a 20px line height, and medium weight. Multiline labels wrap naturally. Place them beside or above their controls and keep the wording concise.

• A placeholder supplements a label; it does not replace one.
• Keep links and unrelated interactive elements outside the label.
• Associate helper text and errors with the control using aria-describedby.
• Use a fieldset and legend to name a group of related controls.
• For complete forms, use a field composition that coordinates labels, descriptions, and errors. Label is the standalone primitive.

Based on shadcn Label and Radix Label.