Component

Label

Accessible caption for a form control, rendered as a native label element. Dims automatically when its associated input is disabled.

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add https://design.ag.org/r/label

Usage

Pair a Label with every input, checkbox, radio, or select so the control has an accessible name and a larger click target.

Composition

input

Playground

Preview

Configure

Label text

The visible label copy.

Code

<div className="flex flex-col gap-1.5">
  <Label htmlFor="email">Email</Label>
  <Input id="email" placeholder="[email protected]" />
</div>

Props

Prop	Type	Default value	Description
htmlFor	string	,	id of the control this label names. Alternatively, wrap the control inside the Label.
className	string	,	Additional classes merged onto the label element.

Do

Associate every input with a Label via htmlFor or by wrapping the control
Keep label text short and descriptive
Use the wrapping pattern to place a checkbox or radio inline with its label

Don't

Don't use placeholder text as a replacement for a Label
Don't render a Label larger than the surrounding body text
Don't apply heading fonts to a Label