Label

A text label for form controls. Associates with inputs via htmlFor, enabling click-to-focus and providing an accessible name. Uses data-slot="label" with automatic disabled styling from parent Field or peer input states.

Anatomy

A single <Label> renders a native <label> with consistent text styling. It detects disabled state from both parent Field (group-data-[disabled=true]) and peer input (peer-disabled) elements.

Examples

With text input

With password input

With checkbox (inline)

Disabled state

Design Guidelines

Do

  • Always use labels with form controls. Every input, select, checkbox, and textarea needs an associated label.
  • Use htmlFor to associate. The htmlFor must match the input's id for click-to-focus and screen reader association.
  • Keep labels concise. One to three words that clearly describe the expected input.

Don't

  • Don't use placeholder instead of label. Placeholders disappear on input and are not reliable for accessibility.
  • Don't duplicate labels with placeholder text. If the label says "Email", don't repeat "Email" as placeholder.
  • Don't forget the htmlFor connection. A label without htmlFor doesn't provide click-to-focus or screen reader association.

Developer Reference

Accessibility

  • Renders a native <label>— full browser accessibility built-in.
  • Uses select-none to prevent accidental text selection on click.
  • Detects disabled state from parent Field via group-data-[disabled=true].
  • Detects disabled state from peer input via peer-disabled.
  • Styling: text-sm, leading-none, font-medium with flex gap-2 for inline icons.

Usage

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

// With text input
<div className="space-y-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="you@example.com" />
</div>

// Inline with checkbox
<div className="flex items-center gap-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>

// With required indicator
<Label htmlFor="name">
  Name <span className="text-destructive">*</span>
</Label>