Indeterminate Checkbox for Svelte

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 checked as "indeterminate". onCheckedChange receives { checked }.

The box shows a dash (MinusIcon) instead of a check, distinct from both an empty and a ticked box.

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.