Label

A styled <label> element that displays text alongside form controls. It automatically adjusts its appearance when its associated control is disabled, using both group-data-[disabled=true] and peer-disabled modifiers.

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

export default function LabelDemo() {
  return <Label htmlFor="name">Name</Label>
}

Anatomy

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

<Label htmlFor="email">Email</Label>

Examples

Basic label

<div className="grid gap-2">
  <Label htmlFor="name">Name</Label>
  <input id="name" type="text" />
</div>

With a checkbox

Use Label inline with a checkbox for a clickable label area.

<div className="flex items-center gap-2">
  <input id="terms" type="checkbox" className="peer" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>

Disabled state

When the associated input is a peer and is disabled, the label automatically reduces opacity and disables pointer events.

<div className="flex items-center gap-2">
  <input id="disabled" type="checkbox" className="peer" disabled />
  <Label htmlFor="disabled">Disabled option</Label>
</div>

API Reference

Label

Renders a <label> element with flex layout, small text, and automatic disabled state handling.

Accepts all standard HTML <label> attributes.