components
Checkbox
Reach for a checkbox when the user chooses one or more items that will be committed later. For instant settings, use a Switch — a checkbox implies a Save step.
Read the full specStatic states
Four visual states side-by-side. These use `defaultChecked` / `disabled` so the gallery shows each without needing state.
tsx
<Checkbox /> {/* unchecked */}
<Checkbox defaultChecked /> {/* checked */}
<Checkbox checked="indeterminate" /> {/* indeterminate */}
<Checkbox disabled /> {/* disabled */}Parent / child (indeterminate)
The parent shows indeterminate when some but not all children are selected. Click the parent to toggle everything.
tsx
const parentState = children.every(Boolean)
? true
: children.every(v => !v) ? false : "indeterminate";
<Checkbox checked={parentState} onCheckedChange={handleParent} />With help text
Stack the label and helper under the checkbox for a two-line row. Bind the label; keep the helper as plain muted text.
Required to finish setting up your organisation.