Settings row

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<div class="tui-settings" role="group" aria-label="Notifications">
  <h3 class="tui-settings__head">Notifications</h3>

  <!-- A switch or a check: the whole row is the label -->
  <label class="tui-settings__row">
    <span class="tui-settings__text">
      <span class="tui-settings__title" id="s1-t">Email receipts</span>
      <span class="tui-settings__desc" id="s1-d">Send a receipt after every payment.</span>
    </span>
    <input class="tui-switch" type="checkbox" role="switch" aria-labelledby="s1-t" aria-describedby="s1-d" checked>
  </label>

  <!-- A key, a select or a value: a plain box -->
  <div class="tui-settings__row">
    <span class="tui-settings__text">
      <span class="tui-settings__title">Two-step sign-in</span>
      <span class="tui-settings__desc">Ask for a code from your phone.</span>
    </span>
    <button class="tui-key tui-key--sm" type="button">Set up</button>
  </div>
</div>

Needs kit.css only, no script. How to install the kit.

• A row that holds a switch is a <label>, so the whole row is the target and the pointer, a finger and a switch-access device all reach it; on a phone the row is at least 64px tall.
• The switch is named by the title with aria-labelledby and described by the sentence with aria-describedby, so it reads “Email receipts, switch, on, Send a receipt after every payment” and not the title and sentence run together as a name.
• The state is the switch’s own position and its lit slot, and a screen reader hears “on” or “off”; no sentence changes with the state, so the words never contradict the control.
• A key row is not a label on purpose: pressing the words does nothing, and the key is named by its words with the title as its description, “Set up, two-step sign-in”.
• The focus ring goes round the whole label row when the switch has the focus, and round the key or select alone in a plain row. A disabled row dims its words and is skipped by the keyboard.

The list already knows how to be a rack of rows with hairlines between them, so the settings row borrows its rule exactly: a one-pixel line, inset to the words, that vanishes under the row the pointer is on. The controls are the kit’s own, a switch, a check, a key and a select, set in the row’s end with auto margin. The row is a flex box that wraps, so on a narrow screen a wide control drops under its words instead of squeezing them.