components

Checkbox

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

PropTypeDefaultDescription
classNametext
indeterminatebooleanVisually distinct from checked/unchecked — e.g. a "select all" that's partially selected.
labeltext