Cognition

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 Cognition tokens. Toggle the theme and it remaps, no dark: classes.

Variants

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

The required variant appends a text-danger asterisk; disabled dims the label.

States

<Label htmlFor="username">Username</Label>
<Input id="username" />
<Label htmlFor="username" disabled>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.
required
boolean
false
Appends a danger-colored asterisk to mark the field as required.
disabled
boolean
false
Dims the label and sets cursor-not-allowed, for a disabled control.
children
ReactNode
required
The label text.

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.

Do
<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/ui/label";
import { Input } from "@/components/ui/input";

export function EmailField() {
  return (
    <div className="space-y-1.5">
      <Label htmlFor="email" required>Email</Label>
      <Input id="email" type="email" />
    </div>
  );
}