Develop

Styles

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