<Checkbox
  indeterminate={true}
  onChange={handleChange}
>
  Indeterminate Checkbox
</Checkbox>

<Checkbox
  indeterminate={true}
  indeterminateIcon={<MinusIcon />}
  onChange={handleChange}
>
  Custom Indeterminate Icon
</Checkbox>

function ParentChildExample() {
  const [items, setItems] = useState([
    { id: 1, checked: false },
    { id: 2, checked: false }
  ]);
 
  const allChecked = items.every(item => item.checked);
  const someChecked = items.some(item => item.checked);
  const isIndeterminate = someChecked && !allChecked;
 
  return (
    <div>
      <Checkbox
        checked={allChecked}
        indeterminate={isIndeterminate}
        onChange={handleParentChange}
      >
        Parent
      </Checkbox>
      {items.map(item => (
        <Checkbox
          key={item.id}
          checked={item.checked}
          onChange={(checked) => handleItemChange(item.id, checked)}
        >
          Item {item.id}
        </Checkbox>
      ))}
    </div>
  );
}