Components

Radio

One choice from a short list, with every option visible at once. Past about seven options, use a Select instead.

Which one

The group

Options sharing a name are what make one choice. That shared name is also why a radio group takes a single Tab stop, with the arrow keys moving between options.

<fieldset class="sr-radio-group">
  <legend class="sr-radio-group__legend">Priority</legend>
  <div class="sr-radio-group__options">
    <div class="sr-radio">
      <input class="sr-radio__input" type="radio" id="p1" name="pri" checked>
      <label class="sr-radio__label" for="p1">Routine</label>
    </div>
  </div>
</fieldset>

States

The ring is round and the checkbox is square. That shape difference is the only cue telling a reader one is single-select — so it is never restyled.

<!-- Rest, hover and focus come from the stylesheet. `name` is what binds
     the options into one choice, so it is present in every state. -->
<div class="sr-radio">
  <input class="sr-radio__input" type="radio" id="r1" name="s">
  <label class="sr-radio__label" for="r1">Unselected</label>
</div>

<div class="sr-radio">
  <input class="sr-radio__input" type="radio" id="r2" name="s" checked>
  <label class="sr-radio__label" for="r2">Selected</label>
</div>

<div class="sr-radio sr-radio--error">
  <input class="sr-radio__input" type="radio" id="r3" name="s">
  <label class="sr-radio__label" for="r3">Error</label>
</div>

<div class="sr-radio">
  <input class="sr-radio__input" type="radio" id="r4" name="s" disabled>
  <label class="sr-radio__label" for="r4">Disabled</label>
</div>

Type: Card Radio

A bordered box so each option can carry a description. Selection is the border turning navy, and the ring keeps its dot — so selection is never the border colour alone.

<div class="sr-radio sr-radio--card sr-radio--card-outline">
  <input class="sr-radio__input" type="radio" id="pw1" name="pathway">
  <label class="sr-radio__label" for="pw1">
    <span class="sr-radio__title">Two-week wait</span>
    <span class="sr-radio__description">Seen within 14 days of referral</span>
  </label>
</div>

Type: Card

The same box, with selection filling the whole card. Label, description and dot all invert together, so the card reads as one selected object rather than a box with a highlight.

<div class="sr-radio sr-radio--card sr-radio--card-filled">
  <input class="sr-radio__input" type="radio" id="cf1" name="pathway" checked>
  <label class="sr-radio__label" for="cf1">
    <span class="sr-radio__title">Two-week wait</span>
    <span class="sr-radio__description">Seen within 14 days of referral</span>
  </label>
</div>

Type: Card Icon

A 24px icon replaces the ring where the option has a recognisable mark. The icon is decorative — the label still carries the name, because an icon on its own does not identify a record type to someone who has not seen it before.

<!-- The icon renders AFTER the label in the DOM. An element between the
     input and the label breaks the `:checked +` adjacency the styling needs. -->
<div class="sr-radio sr-radio--card sr-radio--card-icon">
  <input class="sr-radio__input" type="radio" id="ci1" name="kind" checked>
  <label class="sr-radio__label" for="ci1">
    <span class="sr-radio__title">Diagnosis</span>
    <span class="sr-radio__description">Coded condition on the problem list</span>
  </label>
  <span class="sr-radio__icon" aria-hidden="true"><!-- Icon: clinical/result --></span>
</div>

Do not mix types within one group. A group of cards beside a group of simple radios is fine; a group that is half each is not.

Horizontal

Only for two or three short options. It wraps rather than overflows, and below 480px it should be vertical.

Error

One message for the whole group. Note there is no way back to "nothing selected" once an option is chosen — where "no answer" is meaningful, give it an option of its own.

A single choice from a short list, with every option visible at once.

When to use

• Exactly one answer, from two to about seven options, where seeing all the options is part of the decision.
• Where the options need comparing against one another, priority, pathway, reason for referral.
• Where an option needs a line of explanation. That is what the card types are for.

When not to use

• More than about seven options. Use a Select. Past seven, a radio group is a wall rather than a comparison.
• Any number of answers, including none. Use a Checkbox group.
• A yes/no that takes effect immediately. Use a Switch.
• Two named options that switch a view. Use a segmented control, it reads as a control, not as a question waiting to be answered.
• Where the user must be able to undo their answer back to nothing. A radio group cannot be un-answered once a choice is made; if "no answer" is meaningful, make it an explicit option ("Not known") rather than relying on the empty state.

Types

Do not mix types within one group. A group of cards next to a group of simple radios on the same screen is fine; a group that is half each is not.

How it works

• 20px ring, 28px label offset. The same measurements as Checkbox, so a form mixing the two lines up. The ring is round and the checkbox is square, that shape difference is the only cue that one is single-select, so never restyle it.
• Group anatomy. fieldset → legend → hint → error → options. Options share a name; that shared name is what makes them one choice.
• Vertical by default. Horizontal is only for two or three short options, and it wraps rather than overflows.
• No default selection unless there is a genuine default. Pre-selecting the first option to avoid an empty state records an answer the user never gave.
• Card types carry a description. One line, sentence case, explaining the consequence of the choice, not a restatement of the label.
• Selected cards invert. On Card and Card Icon the label, description and dot all go white together, so the card reads as one selected object rather than a box with a highlight.
• Error sits on the group. One message above the options with a red rule down the left, never a message per option.

Do & don't

Accessibility

• Native <input type="radio">. Arrow-key roving focus, Space, and form participation are the browser's behaviour, not reimplemented, which is also why a radio group takes one Tab stop, not one per option.
• The legend is the group's accessible name. hideLegend hides it visually only; it stays in the markup.
• The card types keep the same input and label. The icon is decorative and hidden from assistive technology, because the label already carries the name.
• Focus on a card is drawn around the whole card, because the card is the target. On a simple radio it is drawn on the ring.
• Selection is never colour alone: the ring fills and takes a dot; a selected card inverts its whole surface.
• Disabled uses the native attribute, so the option leaves the tab order.

Known gaps

• No Blazor implementation yet.
• Figma draws Card Radio's ring at 16px and the other card types at 20px. Code uses 20px throughout, matching Simple and Checkbox. The Figma set should be normalised to 20px, the deviation is recorded in radio.css.
• Card Icon has no guidance yet on which icons are appropriate; the Figma variant uses clinical/result as a placeholder.

Accessibility requirements