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-formGroup for easy stacking.

<div class="m-formGroup">
  <input class="a-input" type="radio" name="radios" id="radio1">
  <label for="radio1"></label>
  <label class="-text" for="radio1">Radio Button</label>
</div>
<div class="m-formGroup">
  <input class="a-input" type="radio" name="radios" id="radio2" disabled>
  <label for="radio2"></label>
  <label class="-text" for="radio2">Disabled Radio Button</label>
</div>

Inline

Apply the class -inline to m-formGroup to display radio buttons inline.

<div class="m-formGroup -inline">
  <input class="a-input" type="radio" name="inlineRadios" id="inlineRadio1">
  <label for="inlineRadio1"></label>
  <label class="-text" for="inlineRadio1">Option 1</label>
</div>
<div class="m-formGroup -inline">
  <input class="a-input" type="radio" name="inlineRadios" id="inlineRadio2" disabled>
  <label for="inlineRadio2"></label>
  <label class="-text" for="inlineRadio2">Option 2</label>
</div>

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-formGroup.

Select an option
<h5>Select an option</h5>
<ul class="m-formGroup -list">
  <li class="m-formGroup">
    <input type="radio" class="a-input" name="radiobuttonList" id="radio1">
    <label for="radio1"></label>
    <label class="-text" for="radio1">Option 1</label>
  </li>
  <li class="m-formGroup">
    <input type="radio" class="a-input" name="radiobuttonList" id="radio2">
    <label for="radio2"></label>
    <label class="-text" for="radio2">Option 2</label>
  </li>
  <li class="m-formGroup">
    <input type="radio" class="a-input" name="radiobuttonList" id="radio3">
    <label for="radio3"></label>
    <label class="-text" for="radio3">Option 3</label>
  </li>
  <li class="m-formGroup">
    <input type="radio" class="a-input" name="radiobuttonList" id="radio4">
    <label for="radio4"></label>
    <label class="-text" for="radio4">Option 4</label>
  </li>
  <li class="m-formGroup">
    <input type="radio" class="a-input" name="radiobuttonList" id="radio5">
    <label for="radio5"></label>
    <label class="-text" for="radio5">Option 5</label>
  </li>
</ul>