Build Nested Checkboxes (tri-state)

Question

Accepted Answer

## Building Nested (Tri-state) Checkboxes in React

**Mental model:** Track only the *leaf* selection (a `Set` of leaf ids). Every parent's state is **derived**: checked if all its descendant leaves are selected, unchecked if none, indeterminate otherwise. Toggling a parent selects/clears all its leaves. Deriving parent state from leaves is what avoids inconsistent trees.

### Step 1 — Leaf-set state + helpers
```jsx
const [checked, setChecked] = useState(new Set());
const leaves = (n) => n.children ? n.children.flatMap(leaves) : [n.id];
```

### Step 2 — Derive a node's tri-state
```jsx
const stateOf = (n) => {
  const ls = leaves(n);
  const on = ls.filter((id) => checked.has(id)).length;
  return on === 0 ? 'off' : on === ls.length ? 'on' : 'mixed';
};
```

### Step 3 — Toggle a node (and its subtree)
```jsx
const toggle = (n) => {
  const ls = leaves(n);
  const allOn = ls.every((id) => checked.has(id));
  const next = new Set(checked);
  ls.forEach((id) => (allOn ? next.delete(id)

Build Nested Checkboxes (tri-state)

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)