HTML `switch` control

[ramiy]

Description

HTML form control that implement native switch functionality using checkboxes. It adds a switch attribute to the input element with a checkbox type.

<input type=checkbox switch>
<input type=checkbox switch checked>

Introduced in Safari 17.4 - https://webkit.org/blog/15054/an-html-switch-control/

It uses the accent-color property and the experimental ::thumb and ::track pseudo-elements. But even without the pseudo-elements, a native switch control replaces lots of CSS and JS currently used by developers.

Native switcher is also accessible by default, as the logic is inherited from the checkbox. We no longer need to implement different patterns for accessibility.

Specification

https://www.w3.org/TR/wai-aria-1.3/#switch

web-feature

No response

Test Links

No response

Additional Signals

https://webkit.org/blog/15054/an-html-switch-control/

[github-actions]

This comment was automatically generated based on the information you provided. Please don't edit it.

No web features (from the web-features project) were found in your proposal. If your proposal doesn't correspond to a web feature, that is fine.
Otherwise, please update your initial comment to include web-features: <feature-id>.
To find feature IDs, use the web-features explorer.

[lukewarlow]

Should be noted this isn't actually in the HTML spec yet the relevant PR is whatwg/html#9546

[ramiy]

Should be noted this isn't actually in the HTML spec yet the relevant PR is whatwg/html#9546

Correct, not in the spec yet, but already has browser support.

[TAR5]

Why no indeterminate state?
Without an indeterminate state, a user can't make a neutral choice in a search for example.

[lukewarlow]

Switches in aria don't support indeterminate and so the html version doesn't either.

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

A control like that is probably better with an alternative design.

[jfbrennan]

FWIW You can get a really nice functional switch today with <input type="checkbox" role="switch"> and a little CSS https://github.com/jfbrennan/m-/blob/master/src/switch.css

[wpt-interop]

Thank you for proposing HTML switch control for Interop 2026.

We want to let you know it was not selected to be part of Interop this year.

On behalf of the entire Interop team, thank you for submitting it for consideration. We got many more proposals than we could include in this year's project, necessitating some difficult choices. Please note this should not be taken as a comment on the technology as a whole, or our willingness to consider it for Interop in the future. We appreciate the work you put into your proposal, and would welcome your participation in future rounds of Interop.

Posted on behalf of the Interop team.