Design Kit

Radio Button

Radio buttons are used to select a single item in a list of options.

Examples

To render a radio button, apply the class a-input to an input type="radio". For proper styling, radio buttons require an empty label element defined immediately after their declaration.

Stacked

Group radio buttons in m-form__item for easy stacking. Apply class -row to display radio button and label inline.

Select an option
<fieldset>
  <legend class="a-label">Select an option</legend>
  <div class="m-form__item -row">
    <div class="a-radio">
      <input class="a-radio__input" type="radio" name="radios" id="radio1">
      <label class="a-radio__label" for="radio1">Radio Button</label>
    </div>
  </div>
  <div class="m-form__item -row">
    <div class="a-radio">
      <input class="a-radio__input" type="radio" name="radios" id="radio2" disabled>
      <label class="a-radio__label" for="radio2">Disabled Radio Button</label>
    </div>
  </div>
</fieldset>

Inline

Apply -inline to display inline two or more radio buttons.

Select an option
<fieldset>
  <legend class="a-label">Select an option</legend>
  <div class="m-form__item -inline -row">
    <div class="a-radio">
      <input class="a-radio__input" type="radio" name="inlineRadios" id="inlineRadio1">
      <label class="a-radio__label" for="inlineRadio1">Option 1</label>
    </div>
  </div>
  <div class="m-form__item -inline -row">
    <div class="a-radio">
      <input class="a-radio__input" type="radio" name="inlineRadios" id="inlineRadio2" disabled>
      <label class="a-radio__label" for="inlineRadio2">Option 2</label>
    </div>
  </div>
</fieldset>

Radio Button List

Radio button lists are used to wrap a series of radio buttons in a list.

Examples

To render a series of radio buttons in a list, apply the class -list to m-form__item.

Select an option
<fieldset>
  <legend class="a-label">Select an option</legend>
  <ul class="m-form__item -list">
    <li class="m-form__item -row">
      <div class="a-radio">
        <input type="radio" class="a-radio__input" name="radiobuttonList" id="radio1">
        <label class="a-radio__label" for="radio1">Option 1</label>
      </div>
    </li>
    <li class="m-form__item -row">
      <div class="a-radio">
        <input type="radio" class="a-radio__input" name="radiobuttonList" id="radio2">
        <label class="a-radio__label" for="radio2">Option 2</label>
      </div>
    </li>
    <li class="m-form__item -row">
      <div class="a-radio">
        <input type="radio" class="a-radio__input" name="radiobuttonList" id="radio3">
        <label class="a-radio__label" for="radio3">Option 3</label>
      </div>
    </li>
    <li class="m-form__item -row">
      <div class="a-radio">
        <input type="radio" class="a-radio__input" name="radiobuttonList" id="radio4">
        <label class="a-radio__label" for="radio4">Option 4</label>
      </div>
    </li>
    <li class="m-form__item -row">
      <div class="a-radio">
        <input type="radio" class="a-radio__input" name="radiobuttonList" id="radio5">
        <label class="a-radio__label" for="radio5">Option 5</label>
      </div>
    </li>
  </ul>
</fieldset>