export default function Example() {
  const [Check1, setCheck1] = useState(true);
  const [Check2, setCheck2] = useState(true);
  const [Check3, setCheck3] = useState(true);
  return (
    <Box
      css={{
        display: "flex",
        justifyContent: "center",
        width: "100%",
        gap: "$100",
      }}
    >
      <Checkbox
        onClick={() => setCheck1(!Check1)}
        checked={Check1}
        variant="primary"
        size="125"
        id="checkbox3"
      />
      <Checkbox
        onClick={() => setCheck2(!Check2)}
        checked={Check2}
        variant="secondary"
        size="125"
        id="checkbox4"
      />
      <Checkbox
        onClick={() => setCheck3(!Check3)}
        checked={Check3}
        variant="cta"
        size="125"
        id="checkbox5"
      />
    </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