Regarding switches vs checkboxes: it seems natural that switches should belong to standalone settings, whereas checkboxes should belong to a family of related settings. For instance, "enable notifications for this app" should be a switch, but then the related sub-settings "badges", "sounds", "show on lock screen" etc should be checkboxes.
There’s a little more to it than that too. A switch is typically setting something that takes effect immediately, whereas a checkbox is a state setting that needs to be saved to take effect.
> Generally, we recommend using a switch when the end user understands the user interface element as a setting that is either “on” or “off”. A checkbox is well suited for when the end user would understand the element as something to be selected.
I'd like to remind folks that switches and checkboxes mean two different things. Please do not use them interchangeably on the web.
Switches imply that changing the value has an immediate effect (i.e., the change is immediately saved). Checkboxes do not, and should have a corresponding Save button.
Switches were popularized by iOS, where they almost always have immediate effect. Checkboxes have been around much longer on the web, and have almost never had immediate effect (hell, it wasn't even possible until Web 2.0).
This part of the article matches my understanding of the difference:
> Switch versus checkbox
> Generally, we recommend using a switch when the end user understands the user interface element as a setting that is either “on” or “off”. A checkbox is well suited for when the end user would understand the element as something to be selected.
The choice of using a toggle switch or a checkbox depends on the context.
Toggles, switches and checkboxes are all components used to switch between states, often on or off, but not always (in toggles you can also have multiple states)
UI and UX studies suggest how they would be best used to aid readability
A toggle switch is best used for actions or options that have an immediate effect on the user interface and do not have to be confirmed or reviewed.
A checkbox is more suitable when there are further changes, are within a form or need to be revised before continuing.
When designing forms, it is important to focus on the context of use rather than the function of the controls...
I recommend watching this video
https://www.youtube.com/watch?v=wFWbdxicvK0
This research shows six different ways of using the mobile phone screen to control devices with only two states (on/off). There are buttons, sliders and rockers. The ways that require sliding are safer because they avoid problems caused by accidental touches. For this reason, the iPhone uses a slider to unlock the phone
Which is what a checkbox is. A switch element seems needlessly duplicative. A checkbox and a switch have the same purpose. I don't mind it entirely after all we have plenty of block level elements that do the same things as one another. This just feels like a solution in search of a problem.
A switch is not for choosing between two options. It has two states, on and off, and it should be named in a way that makes sense with that in mind ("Dark mode" not "Dark/Light").
A checkbox can actually have 3 states, checked, unchecked, indeterminate/mixed.
This has been posted before. I implemented such an on/off switch in an app but the client didn't know which was which so I replaced it with a simple checkbox.
I personally had not heard this but it does sound intuitive to me. A checkbox is literally something you would check on a form (i.e. piece of paper) before handing it in. A switch on the other hand, it something that offers immediate feedback in the real world.
The “switch versus checkbox” advice in this post is not very clear, IMO.
The essential difference is that a switch commits its state immediately, while a checkbox is part of a form that has a separate submit/apply action.
The real-world metaphors for these elements help remember the distinction. A light switch acts immediately. A checkbox printed on paper only takes effect when that form is processed somehow.
Another standard UI element that usually follows the same rule is radio buttons. They are form elements, and their immediate-effect counterpart is the multi-part button (which Apple calls “segmented control”).
Did you read the linked article? I think toggle switches are a superior metaphor for controls that move a system between two states. Checkboxes are superior for opt-in items that can be skipped over.
if you open iOS settings, you'll see them all over the place. They are not a usability disaster and any shortcoming in articulating intent should be attributed to the designer themselves. Switches can also be used when the binary state is not on/off and you don't want to imply a default state necessarily such as dark/light theme switches.
I won't say you should never use switches... but so many people do them poorly. I come across so many examples of switches where it's impossible to tell which position is "on" or "off". In many cases checkboxes should be preferred. Heck, you could even put a little "check" on the switch if you want to.
They don't serve the same purpose. A toggle switch has an immediate result, such as switching the website between light mode and dark mode. A checkbox is part of a form, and indicates a boolean choice that will only be taken into account once you submit the form.
I'm guessing that historically toggle switches would (immediately) close some electric circuit, whereas checkboxes were used to mark things as done on some paper list.
The way this is implemented, it’s polish over a checkbox, with a fallback to the checkbox where it’s not supported. The semantics has therefore got to be the same as a checkbox - that is, no (native) submission of “off” switches.
reply