Links
Switch in HTML
Apple is experimenting with a new HTML form control: a switch (see WHATWG/HTML issue #9546). It is designed as an attribute for <input type="checkbox">, you'd turn a checkbox into a switch by adding the switch attribute:
<input type=checkbox switch checked>In terms of pseudos:, they're experimenting with ::thumb and ::track pseudo elements for styling the parts of the switch. Unlike the checkbox, it has no ::indeterminate pseudo class, because it has no indeterminate state.
The colour can be set with accent-color. For browsers that don't support this new switch attribute, the element simply falls back to a checkbox.
There is some accessibility support: a switch gets a switch role under the hood, and the element respects the “differentiate without color“ setting in iOS and “on/off labels” on iOS.
Their blog post on when to use it:
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.
(From: An HTML Switch Control | WebKit)