Components
Checkbox
A control that allows the user to toggle between checked and not checked, built on Radix UI's Checkbox primitive.
Install
npx shadcn@latest add https://atomx.acau.net/r/checkbox.jsonUsage
Use Checkbox for binary toggles in forms: opt-ins, agreements, multi-select lists. It wraps Radix UI's Checkbox.Root, which handles keyboard focus, indeterminate state, and disabled propagation. Always pair Checkbox with a Label for accessibility — either via htmlFor matching the checkbox id, or by nesting.
For a single on/off setting that takes immediate effect (rather than being part of a form submission), prefer Switch.
Preview
Default
Checked by default
Disabled
Props
Extends React.ComponentProps<typeof CheckboxPrimitive.Root>. All Radix Checkbox props are forwarded.
| Prop | Type | Notes |
|---|---|---|
checked | boolean | "indeterminate" | Controlled checked state. |
defaultChecked | boolean | "indeterminate" | Initial state for uncontrolled usage. |
onCheckedChange | (checked: boolean | "indeterminate") => void | Fired when the user toggles the checkbox. |
disabled | boolean | Disables interaction and applies muted styling. |
required | boolean | Marks the underlying input as required for form submission. |
name | string | Name attribute on the underlying form input. |