export default function Example() { const [Check1, setCheck1] = useState(true); const [Check2, setCheck2] = useState(false); const [Check3, setCheck3] = useState(false); useEffect(() => { setCheck3(true); }, []); useEffect(() => { if (Check2 != Check3) { setCheck1("indeterminate"); } else if (Check2 && Check3) { setCheck1(true); } else { setCheck1(false); } }, [Check2, Check3]); function HandleCategory(bool) { if (bool) { setCheck2(true); setCheck3(true); } else { setCheck2(false); setCheck3(false); } } return ( <Box css={{ display: "flex", flexDirection: "column", justifyContent: "center", gap: "$100", }} > <Box onClick={() => HandleCategory(!Check1)} css={{ cursor: "pointer", display: "flex", gap: "$025", }} > <Checkbox checked={Check1} variant="primary" isOutline size="125" id="cb1" > Category </Checkbox> </Box> <Box css={{ paddingLeft: "$100" }}> <Box onClick={() => setCheck2(!Check2)} css={{ cursor: "pointer", display: "flex", gap: "$025" }} > <Checkbox checked={Check2} variant="primary" isOutline size="125" id="cb2" > Option 1 </Checkbox> </Box> <Box onClick={() => setCheck3(!Check3)} css={{ cursor: "pointer", display: "flex", marginTop: "$100", gap: "$025", }} > <Checkbox checked={Check3} variant="primary" isOutline size="125" id="cb3" > Option 2 </Checkbox> </Box> </Box> </Box> ); }