Fig. 07 / Toggle · In motion
Mobile UI Patterns
Toggle
EXPLAINED SIMPLY:A toggle is the little switch that flips a setting on or off the moment you tap it, and it never asks you to save.
A toggle is the little switch that flips a setting on or off the moment you tap it, and it never asks you to save. Airplane mode lives behind one. So do Wi-Fi, notifications, and dark mode.
Two parts do all the work. The pill-shaped background is the track, and the circle sliding along it is the knob. Knob to the left on a pale track means off; knob to the right on a filled track means on. You can read a toggle from across the room, which is exactly the job it was hired for.
The deal a toggle makes is that flipping it takes effect immediately. No confirm step, no apply button. That deal is also what separates it from a checkbox: a checkbox marks a choice you'll submit later as part of a form, while a toggle acts the instant it's touched. Put toggles on a form that ends in a save button and you've quietly broken the promise the control was making.
You'll also hear switch, which is what most designers say out loud, plus toggle switch and on off switch. People will also call it a slider, and that one is worth gently correcting: a slider picks a value along a range, like volume or brightness, while a toggle knows two states and nothing in between.
When a setting should act the moment it's touched, ask for a toggle. When the choice waits for a save button, ask for a checkbox and spare your users the confusion.