Nested Checkbox

Description

You have to implement a nested checkbox component that handles a tree-like structure of checkboxes. The component needs to support the following behavior:

Functional Requirements:

1. Parent → Child Behavior:

   • When a parent checkbox is checked or unchecked, all its children and nested children should follow the same state.

2. Child → Parent Behavior:

   • When all children of a parent are checked, the parent should automatically become checked.
   • If any child is unchecked, the parent should become unchecked.

3. Recursive Tree Structure:

   • The checkbox tree can have multiple levels of nesting .

Important Note

You must use the same array structure provided below (CheckboxesData) because all the test cases are written based on this specific tree:

const CheckboxesData = [
  {
    id: 1,
    label: "Fruits",
    children: [
      { id: 2, label: "Apple" },
      { id: 3, label: "Banana" },
      {
        id: 4,
        label: "Citrus",
        children: [
          { id: 5, label: "Orange" },
          { id: 6, label: "Lemon" },
        ],
      },
    ],
  },
  {
    id: 7,
    label: "Vegetables",
    children: [
      { id: 8, label: "Carrot" },
      { id: 9, label: "Broccoli" },
    ],
  },
];

Reference UI