export default function Example() {
  const [Check1, setCheck1] = useState(false);
  const [Check2, setCheck2] = useState(false);

  const StyledLabel = styled("div", {
    textDecoration: "line-through",
  });

  return (
    <Box
      css={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        gap: "$100",
      }}
    >
      <Box
        onClick={() => setCheck1(!Check1)}
        css={{
          cursor: "pointer",
          display: "flex",
          marginTop: "$100",
          gap: "$025",
        }}
      >
        <Checkbox
          checked={Check1}
          variant="primary"
          isOutline
          size="125"
          id="cb4"
        >
          <StyledLabel>This label is struck through</StyledLabel>
        </Checkbox>
      </Box>
      <Box
        onClick={() => setCheck2(!Check2)}
        css={{
          cursor: "pointer",
          display: "flex",
          marginTop: "$100",
          gap: "$025",
        }}
      >
        <Checkbox
          checked={Check2}
          variant="primary"
          isOutline
          size="125"
          id="cb5"
        >
          This label has{" "}
          <a href="https://www.washingtonpost.com"> a link to the homepage</a>
        </Checkbox>
      </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