Switches¶

Icons¶

Add a leading icon with data-icon on the option.

Light Dark

<div class="switch" role="radiogroup" aria-label="Theme">
  <label class="switch-option" data-icon="light_mode">
    <input type="radio" name="theme" value="light" checked /> Light
  </label>
  <label class="switch-option" data-icon="dark_mode">
    <input type="radio" name="theme" value="dark" /> Dark
  </label>
</div>

Labeled field¶

Wrap in fieldset.switch to add an eyebrow <legend> and optional <small> help text:

Listening

Tap to talk Always on

Tap the mic to speak one phrase. UNI mutes itself when you stop.

<fieldset class="switch">
  <legend>Listening</legend>
  <div class="switch" role="radiogroup" aria-label="Listening">
    <label class="switch-option" data-icon="mic">
      <input type="radio" name="listening" value="ptt" checked /> Tap to talk
    </label>
    <label class="switch-option" data-icon="graphic_eq">
      <input type="radio" name="listening" value="always" /> Always on
    </label>
  </div>
  <small>Tap the mic to speak one phrase. UNI mutes itself when you stop.</small>
</fieldset>