Radio Component

Default Radio

Use the radio base class to create a styled radio.

NOTE: Skin uses SVG to give a custom radio button appearance. This SVG is hidden by default to prevent it from appearing alongside the browser default radio button in a non-CSS state.

<span class="radio">
  <input class="radio__control" type="radio" />
  <span class="radio__icon" hidden>
    <svg class="radio__unchecked" height="18" width="18" aria-hidden="true">
      <use href="#icon-radio-unchecked-18" />
    </svg>
    <svg class="radio__checked" height="18" width="18" aria-hidden="true">
      <use href="#icon-radio-checked-18" />
    </svg>
  </span>
</span>

Large Radio

For a larger radio button, use the radio--large modifier plus the #icon-radio-unchecked-24 and #icon-radio-checked-24 icons.

<span class="radio radio--large">
  <input class="radio__control" type="radio" />
  <span class="radio__icon" hidden>
    <svg class="radio__unchecked" height="24" width="24" aria-hidden="true">
      <use href="#icon-radio-unchecked-24" />
    </svg>
    <svg class="radio__checked" height="24" width="24" aria-hidden="true">
      <use href="#icon-radio-checked-24" />
    </svg>
  </span>
</span>

Disabled Radio

Use the disabled attribute to disable any radio input.

<span class="radio">
  <input class="radio__control" type="radio" checked disabled />
  <span class="radio__icon" hidden>
    <svg class="radio__unchecked" height="18" width="18" aria-hidden="true">
      <use href="#icon-radio-unchecked-18" />
    </svg>
    <svg class="radio__checked" height="18" width="18" aria-hidden="true">
      <use href="#icon-radio-checked-18" />
    </svg>
  </span>
</span>

Grouped Radio

A group of radios enforces single-select (unlike a group of checkboxes which allows multi-select).

A fieldset and legend are required in order to create the correct grouping semantics. Note that the Skin global module removes the default fieldset border and padding.

The following example uses the field module for simple layout of radio button fields and labels.

<fieldset>
  <legend>Choose an Option</legend>
  <span class="field">
    <span class="field__control radio">
      <input
        class="radio__control"
        id="group-radio-1"
        type="radio"
        value="1"
        name="radio-group"
      />
      <span class="radio__icon" hidden>
        <svg class="radio__unchecked" height="18" width="18" aria-hidden="true">
          <use href="#icon-radio-unchecked-18" />
        </svg>
        <svg class="radio__checked" height="18" width="18" aria-hidden="true">
          <use href="#icon-radio-checked-18" />
        </svg>
      </span>
    </span>
    <label class="field__label field__label--end" for="group-radio-1">
      Option 1
    </label>
  </span>
  <span class="field">
    <span class="field__control radio">
      <input
        class="radio__control"
        id="group-radio-2"
        type="radio"
        value="2"
        name="radio-group"
      />
      <span class="radio__icon" hidden>
        <svg class="radio__unchecked" height="18" width="18" aria-hidden="true">
          <use href="#icon-radio-unchecked-18" />
        </svg>
        <svg class="radio__checked" height="18" width="18" aria-hidden="true">
          <use href="#icon-radio-checked-18" />
        </svg>
      </span>
    </span>
    <label class="field__label field__label--end" for="group-radio-2">
      Option 2
    </label>
  </span>
  <span class="field">
    <span class="field__control radio">
      <input
        class="radio__control"
        id="group-radio-3"
        type="radio"
        value="3"
        name="radio-group"
      />
      <span class="radio__icon" hidden>
        <svg class="radio__unchecked" height="18" width="18" aria-hidden="true">
          <use href="#icon-radio-unchecked-18" />
        </svg>
        <svg class="radio__checked" height="18" width="18" aria-hidden="true">
          <use href="#icon-radio-checked-18" />
        </svg>
      </span>
    </span>
    <label class="field__label field__label--end" for="group-radio-3">
      Option 3
    </label>
  </span>
</fieldset>

TIP : For large radios, wrap each label and control inside of a field__group element to maintain vertical alignment.

To stack radio buttons vertically instead of side-by-side, simply replace the span wrapper with a div wrapper.

<fieldset>
  <legend>Choose an Option</legend>
  <div class="field">
    <span class="field__control radio">
      <input
        class="radio__control"
        id="group-radio-4"
        type="radio"
        value="1"
        name="radio-group"
      />
      <span class="radio__icon" hidden>
        <svg class="radio__unchecked" height="18" width="18" aria-hidden="true">
          <use href="#icon-radio-unchecked-18" />
        </svg>
        <svg class="radio__checked" height="18" width="18" aria-hidden="true">
          <use href="#icon-radio-checked-18" />
        </svg>
      </span>
    </span>
    <label class="field__label field__label--end" for="group-radio-4">
      Option 1
    </label>
  </div>
  <div class="field">
    <span class="field__control radio">
      <input
        class="radio__control"
        id="group-radio-5"
        type="radio"
        value="2"
        name="radio-group"
      />
      <span class="radio__icon" hidden>
        <svg class="radio__unchecked" height="18" width="18" aria-hidden="true">
          <use href="#icon-radio-unchecked-18" />
        </svg>
        <svg class="radio__checked" height="18" width="18" aria-hidden="true">
          <use href="#icon-radio-checked-18" />
        </svg>
      </span>
    </span>
    <label class="field__label field__label--end" for="group-radio-5">
      Option 2
    </label>
  </div>
  <div class="field">
    <span class="field__control radio">
      <input
        class="radio__control"
        id="group-radio-6"
        type="radio"
        value="3"
        name="radio-group"
      />
      <span class="radio__icon" hidden>
        <svg class="radio__unchecked" height="18" width="18" aria-hidden="true">
          <use href="#icon-radio-unchecked-18" />
        </svg>
        <svg class="radio__checked" height="18" width="18" aria-hidden="true">
          <use href="#icon-radio-checked-18" />
        </svg>
      </span>
    </span>
    <label class="field__label field__label--end" for="group-radio-6">
      Option 3
    </label>
  </div>
</fieldset>