4 ms·

but they should only be used to select one of two labelled choices There's already an existing control for that too: the radiobutton.

onion2k 3y ago
Radio buttons can be used to select one of any number of choices. Toggles are strictly limited to two.
- deprecative 3y ago
  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.
  - onion2k 3y ago
    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.
    - extra88 3y ago
      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.
abrudz 3y ago
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> It is ugly, hard to style right, doesn't have toggle semantics, and needs strange code like theme.theme.value to get the value. I'd much rather write: <select type=switch id=theme> <option value=l>light</option> <option value=d selected>dark</option> </select> And it'd be an actual switch with one label on each side and I'd get the value with theme.value
- Izkata 3y ago
  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>
  - extra88 3y ago
    That's totally valid HTML. Unfortunately, voice control software (Dragon NaturallySpeaking, macOS's feature) doesn't recognize the relationship unless it's explicit.

onion2k 3y ago

Radio buttons can be used to select one of any number of choices. Toggles are strictly limited to two.

deprecative 3y ago
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.
- onion2k 3y ago
  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.
  - extra88 3y ago
    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.

abrudz 3y ago

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> It is ugly, hard to style right, doesn't have toggle semantics, and needs strange code like theme.theme.value to get the value. I'd much rather write: <select type=switch id=theme> <option value=l>light</option> <option value=d selected>dark</option> </select> And it'd be an actual switch with one label on each side and I'd get the value with theme.value

Izkata 3y ago
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>
- extra88 3y ago
  That's totally valid HTML. Unfortunately, voice control software (Dragon NaturallySpeaking, macOS's feature) doesn't recognize the relationship unless it's explicit.