import * as React from 'react'; import Head from 'next/head'; import { Spacer } from '@1milligram/design'; import { RelatedPatterns } from '../../components/RelatedPatterns'; import { Pattern } from '../../constants/Pattern'; import { PatternLayout } from '../../layouts/PatternLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; const Details: React.FC<{}> = () => { const [checked, setChecked] = React.useState(false); const toggle = () => setChecked((c) => !c); return (

The checkbox is placed inside a label. So when clicking on the label, the checkbox will be checked even though it's hidden.

`} css={` .label { display: flex; /* Rounded border */ border-radius: 9999px; /* Size */ height: 32px; width: 64px; /* OFF status */ background-color: rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.3); /* ON status */ background-color: #357edd; border: 1px solid #357edd; /* Push the circle to the right */ justify-content: flex-end; } .label__input { /* Hide the input */ display: none; } .label__circle { /* Rounded border */ border-radius: 9999px; /* Size */ width: 32px; background-color: #fff; /* OFF status */ border: 1px solid rgba(0, 0, 0, 0.3); } `} >

); }; export default Details;