Radios

Use radio buttons combined with context-specific layout classes in situations where a user needs to choose one of two or more mutually exclusive options.

Radio buttons look like this:

<div class="l-wrap l-wrap--twocol">
    <div class="l-wrap__column">
      <div class="c-radio">
        <input class="c-radio__input" id="radio1" name="radio" type="radio" checked />
        <label class="c-radio__label" for="radio1">
          <div class="c-radiolabel__text">All pages</div>
          <div class="c-radiolabel__dot"></div>
        </label>
      </div>
    </div>
    <div class="l-wrap__column">
      <div class="c-radio">
        <input class="c-radio__input" id="radio2" name="radio" type="radio"/>
        <label class="c-radio__label" for="radio2">
          <div class="c-radiolabel__text">Revised pages only</div>
          <div class="c-radiolabel__dot"></div>
        </label>
      </div>
    </div>
  </div>