Toggle Switch

Open Settings on any phone and you’ll see a column of little pills: Wi-Fi, Bluetooth, Airplane Mode. Flip one and something happens right away. That’s a toggle switchToggle switchAn on/off control that applies a setting immediately, like Wi-Fi or Dark mode.Open in glossary →.

A switch has only two states, so what could go wrong? Quite a lot: the switch says “on” while the server says “off”, the setting is forgotten after a restart, or the label is so confusing that nobody knows what “on” means. Let’s learn to catch all of that.

What is a toggle switch?

A toggle switch is a control with exactly two states, on and off, that takes effect immediately. There’s no Save button: flipping the switch is the action. It mimics a physical light switch.

You’ll see it used for:

• Device and app settings: Dark theme, Wi-Fi, Face ID for payments.
• Notifications and privacy: Order updates, Share precise location, Personalized ads.
• Turning a feature on or off in place: Show prices with VAT, Auto-play videos.

Anatomy

Toggle vs checkbox vs segmented control

These three are mixed up all the time. The key question is: does the change happen immediately, or after the user presses a button?

Component	States	When it takes effect	Typical use
Toggle switch	On / off	Immediately	Settings: Dark theme, Notifications
Checkbox	Checked / unchecked (or mixed)	After Submit / Save	Forms: “I agree to the terms”, picking several items
Segmented control	One of 2–5 named options	Immediately	Two options that aren’t on/off: km / miles, List / Map
Radio buttons	One of several	Usually after Submit	Forms: choose a delivery option
Button	No lasting state	When tapped	Actions: Save, Pay, Delete

Dev note

Apple and Google both call it a switch (UISwitch, SwiftUI Toggle, Material Switch). Designers and web libraries often say toggle. On the web it’s usually a checkbox or button styled to look like a switch, with role="switch".

Designs & variants

Every switch here works. Try tapping the labels too: the platforms behave differently.

Dark

Wi-Fi

Low Power Mode

Order updatesRider location, arrival time

Offers & promotions

Use location

Backup over mobile data

Email me receipts

Weekly newsletter

iOS on · off · Android on · off

Allow notifications

Sounds

Badges

When does the setting really save?

Most switches change something on a server: your notification preferences, your privacy settings. That’s where the nastiest bugs live. The UI can say one thing while the server stores another.

🧪 When does the setting really save?

A switch talks to a server. Pick a strategy and a network, then flip the switch and compare what the user sees with what the server stored.

Save strategy

Optimistic + rollbackWait for serverOptimistic, no rollback

Network

Fast (0.4 s)Slow (3 s)Fails (500)

The switch flips instantly. If the server fails, it flips back and explains why. The usual choice for toggles.

Order updates

Restart app (reload from server)

App showsON

Server hasON

App and server agree.

• Flip the switch to see requests…

There are two common patterns:

• Optimistic UI: the switch flips instantly and the request is sent in the background. If the request fails, the switch must roll back and tell the user. This feels fast and is the usual choice.
• Pessimistic UI: the switch shows progress and only flips after the server confirms. It’s slower, but makes sense for important settings like Two-factor authentication or Allow card payments abroad.

The bug is the third option nobody plans for: optimistic without rollback. The switch shows on, the server has off, and the user finds out only when they miss an important notification.

When to use it

A toggle switch is the right choice when:

• The setting has two clear states that can be described as on and off.
• The change applies immediately, without a Save button.
• The label names a thing that is on or off: Dark theme, Order updates.
• The user might switch it back and forth, and both states are safe.

Good and bad uses

Common bugs

#	Bug	What you see	Typical severity
1	Silent failure	The switch flips, the request fails (500 or offline), and the switch stays flipped with no message	High
2	Not persisted	The setting is back to its old value after restarting the app, logging out and in, or on another device	High
3	Out of sync	The switch shows “on” but the feature behaves as “off” (e.g. notifications still arrive)	High
4	Race condition on fast toggling	Quick on/off/on taps end in the wrong final state, because responses arrive out of order	Medium
5	Dependent switches not disabled	Child options stay active while the parent switch (“Push notifications”) is off	Medium
6	Label does nothing	Tapping the label or row doesn’t toggle, where the platform says it should (Android rows, web labels)	Low–Medium
7	Confusing label	Negative or double-negative wording, so users don’t know what “on” means	Medium
8	Wrong default	Marketing or tracking switches default to “on” without consent (a legal risk under GDPR)	High
9	State shown only by color	Users with color blindness can’t tell on from off, especially in dark mode	Medium
10	Screen reader silence	VoiceOver / TalkBack doesn’t say “switch”, “on” or “off”, just the label	High (for affected users)

Find the bug

This Android settings screen of a food delivery app has six bugs. Explore it like a tester:

• Flip every switch, then press Restart app. Did everything stick?
• Turn on Server errors and flip switches again.
• Tap the row text, not just the switch.
• Turn off Push notifications and look at the switches below it.
• Flip a switch on and off very quickly. Read every label carefully.

🐞 Bug hunt: Settings screen

This demo has 6 hidden bugs. Explore it like a tester, then check your findings.

Found0/6

9:41

Settings

Notifications

Push notifications

Order updatesRider location and arrival time

Offers & promotionsDeals from restaurants

Privacy

Share precise locationHelps riders find your door

Turn off personalized ads

Appearance

Dark theme

Test controls

Restart app

Server errors (API returns 500)

Network log

• Flip a switch to see API requests…

1. 1

   Hint: Turn on Server errors, flip a switch, and watch the network log.

   Failed saves are silent and not rolled back

   The request returns 500, but the switch stays in its new position and no message appears. After Restart app it jumps back. Expected: the switch rolls back to its previous state and a message like "Couldn’t update. Try again." is shown.

   Reveal answer✓ I found this
2. 2

   Hint: Turn on Dark theme, then restart the app.

   Dark theme is forgotten after a restart

   Dark theme switches back to off. The network log shows that no request is sent for it, and it isn’t stored on the device either. Expected: the choice survives restarts (saved locally or on the server).

   Reveal answer✓ I found this
3. 3

   Hint: Tap the words "Order updates" instead of the switch.

   Tapping the row text does nothing

   Only the small switch reacts. In Android settings lists the whole row is the touch target, so users expect the text to toggle the switch too. Expected: tapping anywhere on the row toggles it.

   Reveal answer✓ I found this
4. 4

   Hint: Turn off Push notifications, then look at the two switches below.

   Child switches stay active when notifications are off

   Order updates and Offers still look enabled and can be changed, although no notifications will be sent. Expected: dependent switches become disabled (greyed out) or hidden while the parent is off.

   Reveal answer✓ I found this
5. 5

   Hint: Turn Offers & promotions on and immediately off again. Wait 2 seconds.

   Quick on/off leaves Offers in the wrong state

   Your last tap was off, but after a moment the switch jumps back on. The slow offers=true response arrives after the fast offers=false response and overwrites it. This is a race condition. Expected: the final state always matches the last tap.

   Reveal answer✓ I found this
6. 6

   Hint: Read every label with "on" and "off" after it.

   Negative label: "Turn off personalized ads"

   When the switch is on, ads are off. When it’s off, personalized ads are on. This double negative confuses users about their privacy. Expected: a positive label like "Personalized ads", where on means on.

   Reveal answer✓ I found this

How to test it

Checklist

Toggle switch test checklist

0 of 13 checked

Copy

• Each switch shows the correct state on first load (matches the server)
• Default values are correct, and privacy or marketing switches are off by default
• Flipping a switch has an immediate, visible effect (no hidden Save button needed)
• The setting is still correct after restarting the app, logging out and in, and on a second device
• On a failed request the switch rolls back and an error message is shown
• Offline: the app either queues the change clearly or rolls back with a message
• Fast repeated taps end in the state of the last tap, on screen and on the server
• Dependent switches are disabled or hidden when their parent is off
• Tapping the label/row toggles the switch where the platform expects it (Android rows, web labels)
• Labels are positive and clear: "on" means the named thing is on
• On and off are distinguishable without color, in light mode, dark mode and high contrast
• Touch target is at least 44×44 pt (iOS) / 48×48 dp (Android)
• Screen reader announces label, "switch" and the on/off state, and Space toggles it on the web

Example test cases

Accessibility

• Role and state: Screen readersScreen readerSoftware that reads the screen aloud for blind and low-vision users, like VoiceOver or TalkBack.Open in glossary → must announce the label, the role (“switch” or “toggle button”) and the state (“on”/“off”).
  Dev note

  On the web use role="switch" with aria-checked, or a native <input type="checkbox" role="switch">.
• A real label: the switch must be connected to its visible label, not just placed next to it. Otherwise VoiceOver says only “switch, on”. For what?
  Dev note

  <label for> or aria-labelledby.
• Not color alone: the handle position already helps; Material’s check/cross icons and iOS’s optional on/off labels (Settings › Accessibility › Display & Text Size › On/Off Labels) help more. Check contrast of the track and handle: at least 3:1 against the background.
• Touch targetTouch targetThe area of the screen that responds to a tap, which should be large enough for a finger.Open in glossary →: at least 44×44 pt on iOS and 48×48 dp on Android. On the web, WCAG 2.5.8 (AA) asks for at least 24×24 CSS px; 44×44 px (2.5.5, AAA) is the comfortable target. A whole tappable row is even better.
• Keyboard (web): Tab reaches the switch, Space toggles it, and the focus ring is visible.
• Announce failures: if a save fails and the switch rolls back, announce the error message too, or screen reader users will never know.

Mobile vs web

iOSAndroidWeb

• Green track when on, grey when off. The color can be customized, so check contrast.
  Dev note

  Native: UISwitch (UIKit) or Toggle (SwiftUI).
• In grouped Settings-style lists, the switch sits on the right; tapping the row text usually does nothing.
• Optional On/Off Labels accessibility setting shows I/O marks on the switch. Test with it on.
• VoiceOver reads “Label, switch button, on”. Double-tap toggles.

• Material 3 switch: the handle grows when on, and can show check / cross icons. The whole list row is usually tappable.
• Test with TalkBack, font scale and display size, plus dark theme (the colors change completely).
• Watch for process death: Android may kill the app in the background. Coming back, are the switches still correct?
• Older apps may still use Material 2 switches: a thin track with a larger round handle. Mixed styles on one screen are a visual bug.

• No cross-browser HTML switch element, so quality varies. Inspect it in DevToolsDevToolsDeveloper tools built into browsers for inspecting pages, network traffic and errors.Open in glossary →.
  Dev note

  It’s built from a checkbox or a button with role="switch". (Safari has started supporting a switch attribute on checkboxes, but other browsers don’t yet.)
• Check that clicking the label toggles it, that Space works, and that the focus ring is visible.
• Use DevTools to throttle or block the settings request and check rollback and error messages.
• Inside forms, ask: does this switch save immediately, or only when the form is submitted? If the answer is “on submit”, it should probably be a checkbox.

Check your understanding

Quick quiz

0/5 answered · 0 correct

1. 1.A sign-up form has "I agree to the Terms" and a "Create account" button. Which control fits the agreement best?

   AToggle switchBCheckboxCSegmented controlDButton

2. 2.You turn off "Order updates", the network log shows a 500 error, and the switch stays off. What is the bug?

   ANo bug, the switch shows what the user choseBMissing rollback and error message after a failed saveCA localization bugDA touch target bug

3. 3.Which label is clearest for a privacy switch?

   ATurn off personalized adsBDisable no ad trackingCPersonalized adsDAds: don't hide

4. 4.What is the most reliable way to check that a switch setting was really saved?

   ALook at the switch colorBRestart the app (or check on a second device) and see if the setting is still the sameCTap it againDTake a screenshot

5. 5.A user wants to choose between kilometers and miles. What should the design use?

   AA switch labeled "Metric units"BA segmented control with km / milesCTwo separate switchesDA FAB

Key takeaways

• A toggle switch has two states and takes effect immediately. In forms that need Submit, use checkboxes.
• If both options have names (km / miles), use a segmented control, not a switch.
• Labels must be positive: on means the named thing is on.
• The screen and the server are two copies of the setting. Test failed saves (rollback + message), restarts, second devices and fast toggling.
• Check dependent switches, label/row tapping, color-independent state, and screen reader announcements.