Label

Installation#

$ pnpm dlx shadcn@latest add https://www.prfct.dev/r/label.json

Usage#

import { Label } from "@/components/ui/label"

<Label htmlFor="display-name">Display name</Label>
<Input id="display-name" />

Examples#

With an input#

A label above its input is the fastest layout to scan and the most robust on narrow screens.

Optional fields#

When most fields in a form are required, mark the exceptions as optional instead of decorating every other label with an asterisk. The hint sits inside the label, so it is announced with the field's name.

Disabled controls#

A label that follows its control dims automatically when the control is disabled — for native inputs through :disabled, and for Base UI controls such as Checkbox and Switch through their data-disabled attribute.

Guidelines#

When to use#

• To name any form control: inputs, textareas, selects, checkboxes, radios and switches.
• Standalone, outside a Field, for small compositions such as a single checkbox with its text.

When not to use#

• For headings of a group of controls — use a FieldLegend inside a FieldSet, which screen readers announce as the group's name.
• As a clickable link or button — labels only focus or toggle their control.

Writing labels#

Name the thing, not the action: Email, Billing address, Team size. Use sentence case, keep it to a few words, and skip trailing colons — the visual relationship already does that job. Put instructions in a FieldDescription, not in the label.

Accessibility#

• Associate explicitly. Set htmlFor to the control's id. Wrapping the control inside the label also works, but explicit association is more robust across assistive technologies.
• A bigger target. Clicking a label focuses its input or toggles its checkbox, radio or switch — a larger hit area that helps everyone, and is essential for small controls (WCAG 2.5.8).
• One name per control. Don't combine a visible label with a different aria-label; the visible text must be part of the accessible name (WCAG 2.5.3).
• Contrast. Labels use foreground at 14px medium — well above 4.5:1 in both modes.

API reference#

Label#

Renders a native <label> element and accepts all of its attributes.