Hacker News Reader

Comment by abrudz | Hacker News Reader

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

View on HN

but they should only be used to select one of two labelled choices

There's already an existing control for that too: the radiobutton.

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

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.

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

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.

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

Reply on news.ycombinator.com