import Switch from '@cronocode/react-box/components/switch';<Switch name="notify" label="Email notifications" defaultChecked /><div> has to reimplement focus, Space, the disabled state and the tab order — and it submits nothing. This one is the same <input type="checkbox"> a Checkbox renders, with role="switch" over it, so all of that comes from the platform. The role is the whole difference to a screen reader: "on"/"off" rather than "checked"/"not checked".::before. Nothing decorative is in the accessibility tree, and there is no second element to keep in sync with the first.| Key | Result |
|---|---|
Tab | Focuses the switch — it is one tab stop, like any other control. |
Space | Toggles it. The platform supplies this one. |
Enter | Toggles it too, and does not submit the surrounding form. APG lists Enter as optional; a bare checkbox ignores it. |
onconst [notify, setNotify] = useState(true);
<Switch name="notify" label="Email notifications" checked={notify} onChange={(e) => setNotify(e.target.checked)} /><Switch> style the track, on top of the built-in switch component style; labelProps styles the <label> around the pair. checked is both the state and the styles for it — the tuple form takes the value first and what :checked should look like second, so recolouring the on state does not need a second prop or a class of your own.<Switch
name="notify"
label="Email notifications"
checked={[on, { bgColor: 'emerald-500' }]}
onChange={(e) => setOn(e.target.checked)}
labelProps={{ gap: 3, fontSize: 14 }}
/>