Label

Atomshadcn/ui, restyled with tokens

Names a control. Dims when the control before it (its peer) is disabled.

components/atoms/label.tsx
Use it for
Naming a Checkbox, RadioGroupItem or Switch placed next to it.
Not for
Headings or plain text. It is a <label> and must point at a control.

States

DefaultClick the label
Peer disabled

Usage

import { Checkbox } from '@/components/atoms/checkbox';

<div className="flex items-center gap-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept the terms</Label>
</div>

Props

Label props
PropTypeDefaultDescription
htmlForstring—The id of the control it names.
...restComponentProps<typeof Label.Root>—Every native label prop.

Accessibility

  • Clicking the label focuses or toggles its control.