Components

Label

An accessible label associated with a form control via htmlFor. Clicking the label focuses its control, and assistive tech reads them together.

Label is a form primitive. It appears composed inside Input, Checkbox, and other form components. This page documents it as a standalone building block.

Preview

We never share your email.

Rendered with live Folio tokens. Toggle the theme and it remaps, no dark: classes.

Variants

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

<Label htmlFor="email">
  Email
  <span aria-hidden className="ml-0.5 text-destructive">*</span>
</Label>

<Label htmlFor="email" className="cursor-not-allowed opacity-50">
  Email
</Label>

Label has no variant props. For a required field, add a text-destructive asterisk as a child. For a disabled control, dim the label with opacity-50. A label placed after a peer control dims on its own when the control is disabled.

States

Username

<Label htmlFor="username">Username</Label>
<Input id="username" />

Username

<Label htmlFor="username" className="cursor-not-allowed opacity-50">
  Username
</Label>
<Input id="username" disabled />

A disabled label dims to match its disabled control. The label has no hover or active state of its own.

API

Prop

Type

Default

Description

htmlFor

string

undefined

id of the control this label names. Required to wire label to control.

children

ReactNode

required

The label text. Add a required asterisk as a child span.

className

string

undefined

Extra classes. Use cursor-not-allowed opacity-50 to dim the label for a disabled control.

...props

Radix Label props

—

All Radix Label and native label attributes pass through.

Don't and Do

Don't

Don't use a Label as a heading or section title. It names a single form control, not a region of the page. For titles, use the heading styles instead.

<div className="space-y-1.5">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" />
</div>

Always pair a Label with a control via htmlFor -- Input, Checkbox, Radio, or Select.

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

export function EmailField() {
  return (
    <div className="space-y-1.5">
      <Label htmlFor="email">
        Email
        <span aria-hidden className="ml-0.5 text-destructive">*</span>
      </Label>
      <Input id="email" type="email" />
    </div>
  );
}