Nested Checkboxes (Tri-state)
Problem statement
Nested Checkboxes (also called a tree checkbox) is a senior-level question that appears in permission editors, category filters, and file selectors. The challenge is the indeterminate state — when some but not all children of a parent node are checked, the parent must display an indeterminate (half-checked) state. This state is not representable as a simple boolean; it requires the DOM's indeterminate property and a recursive bottom-up derivation algorithm.
Your task is to build a tree of checkboxes where checking a parent checks all its children recursively, and the parent's state is derived bottom-up from its children — fully checked, fully unchecked, or indeterminate. The indeterminate state in HTML is set as a DOM property (not an HTML attribute), which means you need a useRef to access the actual checkbox input element.
Requirements & constraints
- Render a tree of checkbox items with arbitrary nesting depth
- Checking a parent checks all its children (and grandchildren) recursively
- Unchecking a parent unchecks all its children recursively
- Parent checkbox shows an indeterminate state when some (not all) children are checked
- Checking all children of a parent automatically checks the parent
- Unchecking any child of a fully-checked parent puts it in indeterminate state
- The indeterminate state is set via the DOM property (ref.indeterminate = true), not an HTML attribute
How to approach Nested Checkboxes (Tri-state)
The strategy an interviewer expects you to reach for.
Problem Understanding This question has one technical gotcha that immediately separates candidates: the indeterminate state. HTML checkboxes have three visual states — checked, unchecked, and indeterminate (a dash instead of a tick). But indeterminate is a DOM property, not an HTML attribute. You cannot set it with JSX: // ❌ This does nothing — indeterminate is not an HTML attribute <input type="checkbox" indeterminate={true} />
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.