Label

A standalone form label with consistent typography. Use when you need a label outside of a Field context. For labels inside a Field.Root, use Field.Label instead.

Import

import { Label } from "chunks-ui";

Basic Usage

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

With Input

<div className="flex flex-col gap-1.5">
  <Label htmlFor="username">Username</Label>
  <Input id="username" />
</div>

Disabled

disabled dims the label and shows a not-allowed cursor. The label does not read its control’s state, so pass disabled to both:

<div className="flex items-center gap-2">
  <Label htmlFor="terms" disabled>Accept terms</Label>
  <Checkbox.Root id="terms" disabled>
    <Checkbox.Indicator />
  </Checkbox.Root>
</div>

A disabled label carries data-disabled, the attribute Base UI sets on Field.Label inside a disabled Field.Root, and its disabled look is keyed on that attribute alone. One data-disabled: class in className restyles it (spell the variant data-disabled:, as the component does, so cn drops the default):

<Label htmlFor="terms" disabled className="data-disabled:opacity-75">
  Accept terms
</Label>

Inside a Field.Root, use Field.Label, which dims when the field is disabled.

Props

All other props are forwarded to the underlying native <label> element.

Styling

• font-medium text-sm leading-none — matches Field.Label typography