8 ms·

Please don't support making switches be an alternative to checkboxes, since it isn't clear what the current state means. I do like the idea of switches, but the

by abrudz 3y ago

Please don't support making switches be an alternative to checkboxes, since it isn't clear what the current state means. I do like the idea of switches, but they should only be used to select one of two labelled choices but usually not yes/no, as a checkbox does well there. See e.g. https://abrudz.github.io/sans/ https://abrudz.github.io/sans/ where I use four switches to choose between binary non-yes/no options. Make a new element or input type that makes it easy to do switches right, with two labels.

userbinator 3y ago
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.
Animats 3y ago
> 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.

by abrudz 3y ago

userbinator 3y ago

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.

Animats 3y ago

> 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.