Toggle switch
/TOG-ul SWISH/ · noun · INPUT pattern · #046
An instant on/off for a single setting. If the change doesn't take effect immediately, it should be a checkbox instead.
You might call it
- “an on/off switch”
- “the slider button that turns a setting on and off”
- “the green switch in iPhone Settings”
- “a toggle button”
- “the pill-shaped switch”
…its name is Toggle switch.
Common questions
Toggle switch vs checkbox: which should I use?
Use a switch when flipping it takes effect immediately, like turning Wi-Fi on. Use a checkbox when the choice is only applied later with a Save or Submit button, or when it is one of several options a user can select in a form.
In code
| SwiftUI | Toggle |
|---|---|
| UIKit | UISwitch |
| Jetpack Compose | Switch |
| Android (Views) | MaterialSwitch |
| Flutter | Switch CupertinoSwitch |
| Web (HTML / ARIA) | <input type="checkbox" role="switch"> |
Prompt for your AI coding tool
Add a toggle switch for this setting: a pill-shaped track with a round thumb, a visible label on the left, and the setting applied immediately when it is flipped — no Save button. On is clearly distinguishable from off by more than colour (thumb position, and an icon or text if space allows). Make the whole row tappable, and expose it as a switch with its on/off state to screen readers (role="switch" on the web).
More UI words to use when vibe coding →