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="cb5" > <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="cb6" > This label has{" "} <a href="https://www.washingtonpost.com"> a link to the homepage</a> </Checkbox> </Box> </Box> ); }