[userbinator]

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

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

[abrudz]

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]

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]

That's totally valid HTML. Unfortunately, voice control software (Dragon NaturallySpeaking, macOS's feature) doesn't recognize the relationship unless it's explicit.

[onion2k]

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

[deprecative]

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]

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]

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.