[Proposal] A toggle switch control element

We propose new form control element representing ‘toggle switch’. It’s similar to existing <input type=checkbox>, but it should have different appearance, semantics, and customizability. It was initially requested in a whatwg/html issue.

We have an explainer, and a demo with a prototype.

We’d like to move the explainer in my GitHub repository to WICG.


Switches have an action vs. state ambiguity, explained pretty well in this SO post. The solution proposed there is to label both states outside of the switch. (The extent of the ambiguity depends a lot on the styling, including the color and size of the button relative to the track.)

Supporting two labels could be difficult given the effort to stay close to existing input markup, but I think it’s important given the potentially poor UX of the element otherwise.

1 Like

I feel like a toggle switch element should actually immediately submit when toggled. The user expectation is that tapping/clicking immediately toggles the state rather than like checkboxes which are usually found as form elements with separate submission.

1 Like

@JonathanRowley Let’s discuss the issue on https://github.com/tkent-google/std-switch/issues/15 .