Choice card

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

<fieldset class="tui-choice-cards">
  <legend class="tui-label">Plan</legend>
  <div class="tui-choice-cards__set">
    <label class="tui-choice-card">
      <input class="tui-choice-card__input" type="radio" name="plan" value="team" checked>
      <span class="tui-choice-card__name">Team</span>
      <span class="tui-choice-card__mark" aria-hidden="true"></span>
      <span class="tui-choice-card__desc">Shared projects for up to ten people.</span>
      <span class="tui-choice-card__price">£12 <small>a seat, monthly</small></span>
    </label>
    <label class="tui-choice-card"> … </label>
  </div>
</fieldset>

<!-- Any number: checkboxes. A column: tui-choice-cards--stack -->
<input class="tui-choice-card__input" type="checkbox" name="addon" value="support">

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

• Each card is a native radio or checkbox inside its label, so the name read out is the label’s whole text, “Team, Shared projects for up to ten people, £12 a seat, monthly, radio button, 2 of 3”, with the group’s legend before it.
• The chosen card is told three ways that are not colour: it sits lower, its corner key is latched with a dot or a tick, and the browser says “checked”. Nothing here lights a hue.
• The focus ring goes round the whole plate when its input has the focus, 2px, offset so the skirt does not hide it, and it is as visible on the pressed card as on the others.
• A group of radios gets the browser’s own arrow keys and one tab stop; a set of checks has a tab stop to each, as any checkboxes do.
• On a phone each plate is at least 64px tall and spans the width of its column, the grid never scrolls sideways and the press needs no hover.

It is the kit’s key drawn large: the same cap, the same skirt (three pixels, as a large key has) and the same pressed shadow, so the plate goes down below the panel exactly as a key does and follows every finish and both volumes. The corner key is the check key drawn small, driven by the input’s own state with ~ instead of a script. The input is stretched over the plate with zero opacity, which is why a press, a label, a focus and the arrow keys all stay the browser’s.