Segmented control

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-seg tui-seg--plain" role="radiogroup" aria-label="Range">
  <label><input type="radio" name="range" value="day"><span>Day</span></label>
  <label><input type="radio" name="range" value="week" checked><span>Week</span></label>
  <label><input type="radio" name="range" value="month"><span>Month</span></label>
</div>

<!-- Full width, and a size -->
<div class="tui-seg tui-seg--plain tui-seg--block tui-seg--lg" role="radiogroup" aria-label="View">…</div>

<!-- Icons in place of words: each is named -->
<div class="tui-seg tui-seg--plain tui-seg--icon" role="radiogroup" aria-label="Layout">
  <label><input type="radio" name="layout" value="list" aria-label="List" checked><span><svg …/></span></label>
</div>

// Nothing to load: radios, native. Read the choice as you would any radio group.
document.querySelectorAll('input[name="range"]').forEach((r) =>
  r.addEventListener('change', () => show(r.value)));

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

• It is a radio group, so a screen reader hears its name, “Range, 2 of 4, Week, selected”, and the arrow keys, Tab and the wrap at each end are the browser’s.
• The tray carries role="radiogroup" and an aria-label, or is a fieldset with a legend; both name the group.
• The pressed key is shown by depth and a heavier ink, not colour; without the lamps there is no colour to lose in either finish.
• A segment with only an icon needs an aria-label on its input, and one that is unavailable stays in the row, disabled, so the choices do not shift.
• Focus is the kit’s 2px ring on the segment’s key, drawn from the hidden input.
• It changes something at once. A choice that needs a confirmation is a form with a key, not this.

The tray and the key are the kit’s recess and cap, already in the selector; this part is the selector with its lamps off and three more things. A pressed key drops the height of its skirt into the tray and takes the pressed light, so the plate’s edge shades its top. Sizes change the key and the tray together, and each keeps the corners concentric: 5, 6 or 8px of key plus the 3px gap is 8, 9 or 11px of tray. The radios are ordinary inputs, absolutely positioned and invisible, with the printed key as the span that follows each; there is no script at all.