Checkbox

Default

Indeterminate

A third state, drawn in the accent colour, that means “some but not allof the things this checkbox represents are selected.” You set it by passing checked=“indeterminate” instead of a boolean.

The canonical use is a “select all” row sitting above a list of child checkboxes. The parent reflects the aggregate state of its children:

• All children checked → parent is true
• No children checked → parent is false
• Some children checked → parent is “indeterminate”

Try the demo below: toggle individual party members and watch the parent “Select all” checkbox switch through all three states. Click the parent itself to check or uncheck everyone at once.

Note: “indeterminate” is purely a visual + aria-checked=“mixed” state. Clicking an indeterminate checkbox calls onCheckedChange with true— it's up to your handler to decide what clicking it means (in the demo, we check everyone).

Disabled

Accessibility notes

• Built on Radix Checkbox — full keyboard support (Space toggles), proper aria-checked states including mixedfor indeterminate (screen readers announce “partially checked”).
• The tick is rendered with Motion. Under prefers-reduced-motion the scale-in animation swaps for an instant opacity fade.
• Always associate a Label via htmlFor — the label itself is the larger, easier click target.