Premium
React Nested Checkbox Tree (Parent–Child Sync)
Challenge summary
Build a small React UI that renders a parent checkbox and multiple child checkboxes. The parent controls all children, and the children keep the parent in sync (checked, unchecked, or indeterminate).
What you'll practice
- Render a parent checkbox with a label, plus several child checkboxes listed under it.
- - If all are checked → parent is checked.
- - If none are checked → parent is unchecked.
- - If some are checked → parent is indeterminate.
- The parent’s visual state shows indeterminate when selection is mixed.
What Premium unlocks
Premium unlocks the runnable workspace, behavioral checks, implementation walkthrough, and edge-case discussion.
Free related practice
Upgrade to FrontendAtlas Premium to unlock this challenge. Already upgraded? Sign in to continue.