Radios

One choice from a short list. Every option is visible, so people can compare them.

When to use

For up to about seven mutually exclusive options. Yes or no questions. Which document you have.

How should we contact you?

SMS Works on any phone Email Post

Show HTML

<fieldset class="ag-field ag-mb-0">
  <legend class="ag-legend">How should we contact you?</legend>
  <div class="ag-choices">
    <label class="ag-radio">
      <input type="radio" name="contact" value="sms" checked />
      <span class="ag-radio__label">SMS <span class="ag-radio__hint">Works on any phone</span></span>
    </label>
    <label class="ag-radio">
      <input type="radio" name="contact" value="email" />
      <span class="ag-radio__label">Email</span>
    </label>
    <label class="ag-radio">
      <input type="radio" name="contact" value="post" />
      <span class="ag-radio__label">Post</span>
    </label>
  </div>
</fieldset>

Inline, for two short options

Do you have a passport?

Yes No

Show HTML

<fieldset class="ag-field ag-mb-0">
  <legend class="ag-legend">Do you have a passport?</legend>
  <div class="ag-choices ag-choices--inline">
    <label class="ag-radio"
      ><input type="radio" name="passport" value="yes" /><span class="ag-radio__label">Yes</span></label
    >
    <label class="ag-radio"
      ><input type="radio" name="passport" value="no" /><span class="ag-radio__label">No</span></label
    >
  </div>
</fieldset>

Accessibility

The question is the legend of a fieldset, so it is read with every option.
The native input is restyled, never hidden, so it stays focusable and visible in forced-colours mode.
The whole label is the target, 48px tall, so a thumb can hit it.
Do not preselect an option unless there is a genuine default. People submit without reading.
Hints inside an option use ag-radio__hint and are part of the label.