FrontendArk

Master Frontend Interviews

  • Practice
  • Playground
  • Resource
Medium

Nested Checkboxes

25 mins

Build a Nested Checkboxes component in React with parent-child selection logic.

Requirements:

  1. Render a hierarchical structure of checkboxes.
  2. Selecting a parent checkbox should:
    • Select/deselect all its child checkboxes.
  3. Selecting/deselecting a child should:
    • Update the parent to checked if all children are checked.
    • Update the parent to unchecked if no children are checked.
    • Update the parent to indeterminate if some children are checked.
  4. Indent children visually under their parent.
  5. Focus on functionality over styling.
  6. The component should work out-of-the-box in a live React preview (e.g., CodeSandbox/Sandpack).

Code Editor

React Component

00:00
Loading...

Live Preview

See your React component