Switch
A control with two mutually exclusive states (on or off) that takes effect immediately when toggled.
Notifications
Email and push
Dark mode
Use system theme
Auto-save
Every 30 seconds
Switches are visual on/off toggles modeled after physical light switches. Unlike a checkbox, the change applies right away with no separate Save step. The W3C ARIA `switch` role is distinct from `checkbox`: switches imply binary state with immediate effect, checkboxes imply selection within a form. iOS popularized the physical-looking switch in 2007; Material and most web design systems now ship a similar control.
Also called
toggletoggle switchon/off switch
When to use
- Settings that take effect immediately like 'Airplane mode' or 'Dark mode'
- Binary preferences with no Save button
- Enabling or disabling a feature
When not to use
- Form fields that submit on Save (use a checkbox)
- Choices that are not strictly binary (use a select or segmented control)
- Touch targets too small to operate accurately
Related
Source
W3C ARIA `switch` role. Apple HIG ('Toggle'), Material Design ('Switch'), Radix UI 'Switch' component.