Checkbox
Binary toggle for forms, with indeterminate support
Category: inputs · WCAG 2.2-AA · form, toggle, boolean
States
- unchecked
- checked
- indeterminate
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Text label for the control. |
checked | boolean | — | Whether the control is checked (controlled). |
indeterminate | boolean | false | When true, renders the mixed/indeterminate state. |
disabled | boolean | false | When true, disables the control and removes it from the tab order. |
onChange | React.ChangeEventHandler<HTMLInputElement> | — | Called when the value changes. |
ariaLabel | string | — | Invisible accessible name, for when a visible element outside this component already labels it and `label` would render that text a second time. ⚠ `label` on this component is **visible**; `IconButton.label`/`Sparkline.label` are invisible names, which is the prior that costs adopters a duplicated label. The raw DOM `aria-label` still wins over this. |
Design tokens
--cascivo-color-surface--cascivo-color-accent--cascivo-color-border-strong--cascivo-color-text-on-accent--cascivo-radius-sm--cascivo-focus-ring
When to use
- Selecting zero or more options from a list where each choice is independent
- A single opt-in within a form (accept terms, subscribe) submitted alongside other fields
- A "select all" control that needs an indeterminate (partial) state
When not to use
- A binary setting that applies immediately on change — use Toggle
- Choosing exactly one option from a mutually exclusive set — use Radio
How to build an accessible Checkbox in React →
Examples
With label
<Checkbox label="Accept terms" />Indeterminate
<Checkbox label="Select all" indeterminate />Related components
- Toggle — Use for immediate binary settings rather than form values
- Radio — Use for selecting exactly one from a mutually exclusive set
- CheckboxCard — Use the card variant when each option needs a title plus description