22Radio

One choice from a visible set. Always grouped in a Fieldset so the question is announced with the options.

Use it for

2–4 mutually exclusive options that are all worth seeing

Not for

More options than fit comfortably — Select

In a fieldset

Difficulty Beginner Advanced

markup

<fieldset class="ns-fieldset">
  <legend class="ns-fieldset__legend">Difficulty</legend>
  <label class="ns-choice"><input type="radio" name="d1" class="ns-radio" checked>
    <span class="ns-choice__text"><span class="ns-choice__label">Beginner</span></span></label>
  <label class="ns-choice"><input type="radio" name="d1" class="ns-radio">
    <span class="ns-choice__text"><span class="ns-choice__label">Advanced</span></span></label>
</fieldset>

Accessibility contract

Arrow keys move within the group natively — nothing to wire