Re:An HTML Switch Control
by userbinator on Thursday February 29, 2024 @01:09AM
(#39546796)
but they should only be used to select one of two labelled choices
There's already an existing control for that too: the radiobutton.
That's a very good point, but it requires a lot of code:
<form id=theme>
<label for=theme-l>light</label><input id=theme-l type=radio name=theme value=l>
<input id=theme-d type=radio name=theme value=d checked><label for=theme-d>dark</label>
</form>
<style>
input:checked{position:relative;z-index:1}
input+input{margin-left:-1em}
</style>I'd much rather write:
<select type=switch id=theme>
<option value=l>light</option>
<option value=d selected>dark</option>
</select>
If you nest the input and label you can get rid of "for" and "id":
<label>light<input type=radio name=theme value=l></label>That's totally valid HTML. Unfortunately, voice control software (Dragon NaturallySpeaking, macOS's feature) doesn't recognize the relationship unless it's explicit.
Radio buttons can be used to select one of any number of choices. Toggles are strictly limited to two.
Re:An HTML Switch Control
by deprecative on Thursday February 29, 2024 @08:01AM
(#39548728)
Which is what a checkbox is. A switch element seems needlessly duplicative. A checkbox and a switch have the same purpose. I don't mind it entirely after all we have plenty of block level elements that do the same things as one another. This just feels like a solution in search of a problem.
Not really. A checkbox toggles between two binary states of a single option. A toggle switches between two different options.
UI design isn't simple. You can't just pick basic options. Getting it right takes a lot of effort.
A switch is not for choosing between two options. It has two states, on and off, and it should be named in a way that makes sense with that in mind ("Dark mode" not "Dark/Light").
A checkbox can actually have 3 states, checked, unchecked, indeterminate/mixed.
> Please don't support making switches be an alternative to checkboxes, since it isn't clear what the current state means.
That's why their main application is opting out of tracking, where user confusion is a desired feature.
Make a new element or input type that makes it easy to do switches right, with two labels.