<input type=checkbox switch>

[atishay]

This is a feature request on the behalf of all web developers targeting mobile. Here are reasons the toggle switch element should be natively available in HTML forms:

• Switch is a standard and popular UI control in both Android and iOS mobile platforms.
• Checkbox is used in websites due to the absence of the switch. Checkbox is absent from iOS and is not considered a good part of the human interface for forms on mobile. Checkbox has a smaller hit area than switches.
• Switch is very popular in UI frameworks that have been providing this as a component to use - Material Design, Bootstrap, React Native
• Switches are non-trivial to implement properly in CSS. See Codepen, W3Schools. Most frameworks that are provided to generate HTML on the server do not have a switch causing developers, especially enterprise using checkbox in the place of a switch. PWAs without switches appear non-native on mobile platforms.
• Implementing switches should have no performance overhead for the browsers (separate component in the UI).

I am happy to help writing a spec for the <input type="switch" /> element if that can help getting it into the browsers.

[annevk]

Shouldn't this be a checkbox with a different style? E.g., appearance: switch?

cc @whatwg/rendering

[atishay]

Definitely makes more sense as we get backwards compatibility.

[annevk]

Apologies for not welcoming you by the way, I missed this is your first issue. Belatedly, welcome! https://whatwg.org/working-mode#changes and https://whatwg.org/faq#adding-new-features provide some context for the way work is done. I think for this particular request there is enough to go on as this is clearly an established UI widget that makes sense to expose the web in some form. Thanks for raising it.

[domenic]

Indeed, welcome. I'm glad @annevk pointed you to the adding new features FAQ, as it helps keep specific solutions (e.g. <input type="switch">) separate from the problem statement ("displaying a control that looks like a switch").

Coincidentally we have been having some discussions internally in Chrome about better built-in UI widgets and form controls. At this point I don't have much to report beyond tentative interest in the general program. But there's a lot to still figure out in the specifics: e.g. theme-ability, whether we can do this in a layered way that does not require more browser magic (like appearance does), etc.

[sideshowbarker]

👍 It also seems worth mentioning that ARIA (since ~1.1 I think) now has a switch role:

https://w3c.github.io/aria/#switch

[atishay]

I am happy to work with the team if any help in needed in getting this spec'ed or implemented, in whatever form it makes sense to get a toggle switch control into the browsers. I will be careful about not having a solution but only a problem in the future.
Really glad to see how active the HTML WG is on their github channel.

[annevk]

@sideshowbarker that's very interesting, that almost suggests there is some semantic related to the presentation of a switch checkbox. Using a CSS property at that point wouldn't work well as that couldn't map to ARIA cleanly.

cc @whatwg/a11y

[LJWatson]

The ARIA 'switch' role maps to the accessibility APIs, so an element with 'role="switch"' has semantic meaning to screen readers.

• MSAA + IA2: Role: ROLE_SYSTEM_CHECKBUTTON, Role: IA2_ROLE_TOGGLE_BUTTON
• UIA: Control Type: Button, Localized Control Type: toggleswitch
• ATK/AT-ASPI: Role: ROLE_TOGGLE_BUTTON, Object Attribute: xml-roles:switch
• AX API: AXRole: AXCheckBox, AXSubrole: AXSwitch

[malchata]

I don't think this is a bad idea, but proposals for new browser features can take a long time between conception and implementation across platforms—assuming universal adoption is ever achieved.

Because of this, the question that immediately springs to mind for me is "what does a reliable non-JavaScript fallback pattern look like for this?", and appearance: switch; in combination with <input type="checkbox"> seems to provide a foundation for a progressively enhanced and accessible switch element.

[annevk]

I agree that's a good consideration, but note that <input type=checkbox switch> would provide that too and is probably more apt given the slight semantic implication.

[malchata]

Good point @annevk. I can't see any reason why that wouldn't work as well!