A single checkbox, with the same label/description/error model every other form control in
this system uses. Supports indeterminate as a DOM property (there's no HTML attribute for it).
tsx
<Checkbox label="Email me about updates" />label
Examples
For a standalone yes/no option — terms acceptance, "remember me" — pair label with description
for the fine print:
tsx
<Checkbox label="I agree to the terms" description="You can review them any time in Settings." />indeterminate is a visual third state for a "select all" checkbox whose children are partially
selected — it's set imperatively (there's no <input indeterminate> HTML attribute), so it's
almost always driven from a ref or a parent's derived state rather than typed by hand:
tsx
<Checkbox
label="Select all"
checked={allSelected}
indeterminate={someSelected && !allSelected}
onChange={toggleAll}
/>For a related set of options where exactly one can be true, reach for
RadioGroup instead — a group of Checkboxes doesn't enforce
mutual exclusivity on its own.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | text | — | — |
| indeterminate | boolean | — | Visually distinct from checked/unchecked — e.g. a "select all" that's partially selected. |
| label | text | — | — |