Docs › Components › Label

Shadcn Label

The shadcn/ui Label names a form control, styled with Tailwind CSS v4. Built on accessible primitives, it ties text to a field so clicking the label focuses the input and screen readers announce the name. Labels sit beside inputs, checkboxes, and switches across ShadcnStore blocks.

Key features

• Associates text with a control via htmlFor and id.
• Clicking the label focuses or toggles its field.
• Works with Input, Checkbox, Switch, and radio items.
• Styled to match disabled and peer states.

Installation

npx shadcn@latest add label

Usage

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

export function Example() {
  return (
    <div className="grid gap-2">
      <Label htmlFor="email">Email address</Label>
      <Input id="email" type="email" />
    </div>
  )
}

The htmlFor on the label must match the id on the input.

With a checkbox

<div className="flex items-center gap-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms</Label>
</div>

Accessibility

• A connected Label is the most reliable accessible name for a field and enlarges its hit target.
• Prefer a visible label; only fall back to aria-label when a visible one is impossible.
• Do not put interactive elements like links inside a label.

When to use the Label

Use a Label for every form control that takes input: text fields, checkboxes, switches, radio items, and selects. When you compose fields with the Form component, FormLabel wires this up for you. Reach for aria-label only when a visible label truly cannot fit.

Used in these blocks

• Login forms: field labels.
• Signup forms: account field labels.
• Checkout forms: billing field labels.

Related components

A Label names an Input, Checkbox, Switch, Textarea, or Radio Group item, and is generated automatically inside the Form component.

FAQ

What is the shadcn label used for?

The Label names a form control so users and screen readers know what to enter, and clicking it focuses the associated field.

How do I connect a label to an input?

Set the label's htmlFor to the input's id. They must match so the label is programmatically tied to the field.

Do I need a label for every field?

Every input needs an accessible name. A visible Label is best; if you must hide it, keep it for screen readers or use aria-label.

Does the Form component add labels for me?

Yes. FormLabel inside the Form component connects the label to its field automatically.