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>
);
}
To enter the code editing mode, press Enter. To exit the edit mode, press Escape
You are editing the code. To exit the edit mode, press Escape