Radio

A radio allows users to select exactly one option from a set.

<label class="tng-radio-control">
  <input type="radio" name="delivery" checked />
  <span>Home delivery</span>
</label>
<label class="tng-radio-control">
  <input type="radio" name="delivery" />
  <span>Click and collect</span>
</label>

Home delivery Click and collect

Elements

Grouping

Group related radios in a <fieldset> with a <legend> so assistive technology announces the group context.

<fieldset class="tng-stack">
  <legend class="tng-text-title is-8 mb-xl">
    Contact preference
  </legend>
  <label class="tng-radio-control">
    <input type="radio" name="contact" checked />
    <span>Email</span>
  </label>
  <label class="tng-radio-control">
    <input type="radio" name="contact" />
    <span>SMS</span>
  </label>
</fieldset>

Contact preference

Email SMS

Sizes

<label class="tng-radio-control is-sm">
  <input name="size" type="radio" />
  <span>Small</span>
</label>
<label class="tng-radio-control is-lg">
  <input name="size" type="radio" />
  <span>Large</span>
</label>

Small Large

States

Disabled

<label class="tng-radio-control">
  <input type="radio" name="state" disabled />
  <span>Disabled</span>
</label>
<label class="tng-radio-control">
  <input type="radio" name="state" checked disabled />
  <span>Selected and disabled</span>
</label>

Disabled Selected and disabled

Accessibility

Semantic markup

Use native <input type="radio"> elements with a shared name value for each group. Wrap each input in a <label> to keep the full row clickable.

Keyboard interaction

• Tab moves focus to the selected radio in a group.
• Arrow keys move selection between options in the same group.
• Space selects the currently focused option.
• Focus visibility is handled by the tng-focus-within utility.

Group labels and descriptions

Each radio group needs a visible label via <legend>. If helper or error text is present, connect it with aria-describedby.