[switch] Should the explainer be rewritten to support the switch attribute?

[gfellerph]

The switch explainer has a long standing open question regarding markup. Initially, the explainer was proposing adding a new <switch> element but an switch attribute proposal using <input type="checkbox" switch> was submitted to WHATWG in July 2023 shortly before the explainer was published.

Should the explainer be rewritten to use the switch attribute?

See also:

• Interop issue for web platform tests
• Comparison between the two approaches

[o-t-w]

I think it should be rewritten or moved to non-active. The PR to add it to the HTML spec has not been merged after several years and the Mozilla standards position is still open... but the stable version of Safari shipped the switch attribute on March 5, 2024 and judging from the comments of Apple developers I doubt they'll be keen on also implementing an alternative. The CSS Form Control Styling Level 1 spec has several mentions of <input type=checkbox switch>. I have tried out the ::track and ::thumb in Safari Technology Preview (currently behind a feature flag). Once they can be used together with appearance: base I think that will be a good approach.

In the Open-UI comparison between the two approaches, one of the points in favour of the <switch> element approach is that inline SVG can be used, which can be styled with currentColor. While it is not implemented anywhere yet, at some point we may get CSS link parameters to change the color of non-inline SVG.

From looking at great many examples in the wild, the vast majority of custom switch components are fairly simple/minimal, so the verbose markup approach felt like overkill imo.

[lukewarlow]

I'm in two minds about this because the switch attribute isn't standardised, and I don't think the switch attribute was necessarily the best design.

The form participation behaviour is unfortunate (check boxes behave equally weird). The fallback to a checkbox is semantically questionable also, due to the immediate action aspect.

I'd be curious on how well used it is (aka how hard to change it is). Though either way it has shipped in Safari, and it's not fatally flawed. The pragmatic approach is to probably accept that design.

We can update css-forms to use any selector for a switch, just happened to have used the one shipped in Safari for now.

[lukewarlow]

Without slider-thumb and slider-track + appearance base I don't know how useful it actually is for people right now but that's besides the point.

[lukewarlow]

If it is rewritten based on the switch attribute I think something valuable is to see what pseudo-elements + other CSS proposals are required to achieve each of the examples. Anything not covered by CSS forms we can raise as an issue to make sure it's accounted for.