Toggle Switch

<!--
  A switch is a checkbox with a different picture on top of it - nothing more.
  `role="switch"` is allowed on `input[type=checkbox]` and changes the
  announcement from "checked" to "on/off"; it rides on the real input, which is
  what keeps Space, form submission and the label association intact. Putting
  `role="switch"` on a div and rebuilding those by hand is a downgrade, not a
  technique.

  The state is carried by the thumb's POSITION as well as the track colour, so it
  survives greyscale.
-->
<div class="switch-field">
  <label class="switch" for="two-factor">
    <input
      class="switch__input"
      type="checkbox"
      id="two-factor"
      name="two-factor"
      role="switch"
      aria-describedby="two-factor-hint"
      checked
    />
    <span class="switch__track" aria-hidden="true"></span>
    <span class="switch__label">Two-factor authentication</span>
  </label>
  <p class="switch__hint" id="two-factor-hint">
    Ask for a code from your authenticator app at every sign-in.
  </p>
</div>