Segmented control

A <fieldset data-segmented> of radio labels: one choice from a short list, shown as a strip. The <legend> is hidden on screen but read aloud.

Basic

<fieldset data-segmented>
  <legend>Mode</legend>
  <label><input type="radio" name="mode" checked> Build</label>
  <label><input type="radio" name="mode"> Watch</label>
  <label><input type="radio" name="mode"> Serve</label>
</fieldset>

Arrow keys move between the choices, because underneath it is an ordinary radio group.

Notes

• The radios are hidden behind their labels; the chosen label is found with :has(input:checked).
• The <legend> is clipped to one pixel rather than removed, so the group keeps its name.
• The chosen label takes the soft tone, so the choice reads as colour rather than as a box.
• Keep it to three or four choices; a longer list belongs in a <select>.