Indeterminate Checkbox for React

On a parent checkbox when only some of its children are checked: a select-all over a list, a permission group partly granted, a table with a few rows selected. A plain yes-or-no never needs it.

This demo holds the state and starts it at indeterminate. The first change stores the next checked value. Pass indeterminate while the dash should show, and checked as a boolean. onCheckedChange receives the next boolean.

Base UI marks the box indeterminate, but the indicator in the checkbox file only holds a CheckIcon: render a MinusIcon there for the indeterminate state to show a dash.

The first click stores the next boolean, so the dash becomes a check. The click after that clears it. The box is controlled, so both moves go through the same handler.

As "mixed" or "partially checked", depending on the screen reader. The checkbox exposes the mixed state. Give the box a label that says what it covers, like "Select all features", so "mixed" means something.

This file is one checkbox, so the dash is the starting value, not a count of children. For a parent over real children, derive that value each render: all checked, none, or some. When the parent changes, set every child to the next boolean.