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