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.
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.
> 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.
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.
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).
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.
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.
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 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
Sorry I updated my comment above and deleted my cache to show the about icon. It is a kill switch, just another name. I liked the name because I plan to update it to eventually have it trigger on certain events, like an E-mail or phone app event. Some apps already do this portion of it, but I honestly never trusted them, hence why my goal is to make the code eventually all ALv2
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.
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.
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.
reply