Checkbox

Atomshadcn/ui, restyled with tokens

Chooses any number of options, or agrees to one thing. Submitted with the form.

components/atoms/checkbox.tsx
Use it for
Multi-select lists, 'remember me', accepting terms.
Not for
A setting that applies at once (Switch) or one choice among several (RadioGroup).

States

Unchecked / checked / indeterminate
With a labelClick the label
Focused
Invalid
Disabled

Usage

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

<div className="flex items-center gap-2">
  <Checkbox id="anonymous" checked={anonymous} onCheckedChange={setAnonymous} />
  <Label htmlFor="anonymous">Send anonymously</Label>
</div>

Props

Checkbox props
PropTypeDefaultDescription
checkedboolean | 'indeterminate'—Controlled state. Pair with onCheckedChange.
defaultCheckedboolean—Uncontrolled starting state.
onCheckedChange(checked: boolean | 'indeterminate') => void—Called on every toggle.
disabledbooleanfalseBlocks changes; a peer Label dims with it.
aria-invalidboolean—The error state.
name / value / requiredstring / string / boolean—Take part in a native form submission.

Accessibility

  • Toggled with Space.
  • Announced as a checkbox; indeterminate is announced as “mixed”.