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",
        alignItems: "center",
        width: "100%",
        gap: "$100",
      }}
    >
      <Checkbox
        onClick={() => setCheck1(!Check1)}
        checked={Check1}
        variant="primary"
        isOutline
        size="125"
      />
      <Box css={{ padding: "$100", backgroundColor: "$gray0" }}>
        <Checkbox
          onClick={() => setCheck2(!Check2)}
          checked={Check2}
          variant="secondary"
          isOutline
          size="125"
        />
      </Box>
      <Checkbox
        onClick={() => setCheck3(!Check3)}
        checked={Check3}
        variant="cta"
        isOutline
        size="125"
      />
    </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