Label

Label renders a styled native <label> element for form controls. It picks up disabled and invalid state from a surrounding Field automatically, so you rarely have to wire styling by hand — the label dims when the input is disabled and turns red when the field is marked invalid. Use it for every form input you ship, both for accessibility and because users rely on visible labels far more than placeholder text alone.

When to use

• Any time a form control needs a visible, persistent name — inputs, selects, switches, checkboxes, radio groups.
• When you want disabled and invalid styling to flow from a parent Field without writing conditional class names.
• When you need a clickable target that focuses or toggles the associated control, since the native <label> element handles that for free.

Avoid using Label purely as decorative text — for headings, callouts, or section titles, reach for a semantic heading element instead so screen readers do not announce it as a form label.

Installation

bunx @prototyperco/cli add label

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/label.json

npx shadcn@latest add https://prototyper-ui.com/r/label.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/label.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/label.json

This will add the following files to your project:

• components/ui/label.tsx

Usage

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

<Label>Email address</Label>

Examples

With Input

Styling

Data Slots

Use data-slot attributes to target the label in CSS:

Customization Examples

/* Make all labels uppercase */
[data-slot="label"] {
  @apply text-xs uppercase tracking-wide;
}

<Label className="text-base font-semibold">Custom label</Label>

API Reference

Label

A styled <label> element for form controls.

All standard label element props are forwarded via ...props.

Accessibility

Keyboard Interactions

Label is a non-interactive display element and does not have keyboard interactions. Clicking a label focuses or activates its associated form control via the htmlFor attribute or nesting.

ARIA Attributes

• Renders as a native <label> element, so assistive technology announces it as the accessible name of the associated control automatically.
• Associate with a form control either by setting htmlFor to the control's id, or by nesting the control inside the label. Either pattern works; pick the one that fits your layout.
• Automatically receives data-disabled and data-invalid styling from parent Field or group contexts, so you do not need to mirror state on the label itself.
• If you need a hidden label for an input that has a visible icon or placeholder, prefer aria-label on the input over a visually-hidden Label — it keeps the markup simpler and avoids stale labels.

Related