Components
Checkbox
A control that toggles between checked, unchecked, and indeterminate. Use it for multi-select options and opt-ins.
Preview
Rendered with live Cognition tokens — the box, check, and focus ring remap on theme change, no dark: classes. Clicking the label toggles it.
States
<Checkbox /><Checkbox defaultChecked /><Checkbox checked="indeterminate" /><Checkbox disabled defaultChecked />indeterminate is a third visual state for “some but not all” — set checked="indeterminate" (e.g. a select-all header).
API
Prop
Type
Default
Description
checked
boolean | "indeterminate"
undefined
Controlled state. Pair with onCheckedChange.
defaultChecked
boolean
false
Initial state when uncontrolled.
onCheckedChange
(checked) => void
undefined
Fires when the box is toggled.
disabled
boolean
false
Dims to 50% and blocks interaction.
Don't and Do
Don't
Don't use a Checkbox for mutually exclusive choices (that's a Radio Group) or for an on/off setting that applies immediately (that's a Switch).
Do
// Tie it to a label for an accessible hit target
<label className="flex items-center gap-2">
<Checkbox /> Email me updates
</label>import { Checkbox } from "@/components/ui/checkbox";
export function Terms() {
return (
<label className="flex items-center gap-2 text-sm">
<Checkbox /> Accept terms and conditions
</label>
);
}Built on Radix Checkbox — keyboard toggle and the indeterminate state come for free. Pass checked / onCheckedChange for controlled use.