How to build an accessible Toggle in React
Renders a <button role="switch"> with aria-checked reflecting state, so assistive tech announces it as a switch and Space/Enter toggle it via native button activation.
When to use a Toggle
- Flipping a single binary setting that takes effect immediately (e.g. notifications on/off)
- On/off state where a physical switch metaphor reads better than a checkmark
- Settings screens where the change applies live without a separate submit
When not to use it
- Selecting items in a form that is submitted later — use Checkbox
- Choosing one option among several mutually exclusive labels — use SegmentedControl or Radio
Keyboard interactions
Role switch, verified at WCAG 2.2-AA.
SpaceEnter
Common mistakes
Avoid: <Toggle label="I accept the terms" /> inside a submitted form
Prefer: <Checkbox label="I accept the terms" />
A switch implies an instant on/off setting; agreement that is submitted with the form is a checkbox
Avoid: <h3>Dark mode</h3><Toggle label="Dark mode" /> — the label repeats the heading
Prefer: <h3>Dark mode</h3><Toggle aria-label="Dark mode" />
The `label` prop renders visible text and is the accessible name; when a heading already names the control, use aria-label so the name is not shown (and read) twice
Example
<Toggle label="Notifications" defaultChecked />