Radio Buttons

Useful when you want to group a series of radio buttons together on a single line.

<ul class="input-list">
  <li class="input-item-inline">
    <input id="radio-id" name="radio-name" type="radio" class="input input-radio" checked />
    <label for="radio-id" class="input-label">Radio Button Label</label>
  </li>
</ul>

Stacked Radio-Button Lists

Useful when you want to group a series of radio buttons together in a list (stacked by default).

<ul class="input-list">
  <li class="input-item">
    <input id="radio-id" name="radio-name" type="radio" class="input input-radio" checked />
    <label for="radio-id" class="input-label">Radio Button Label</label>
  </li>
</ul>

Inverse Radio-Button Lists

Nulla vitae elit libero, a pharetra augue.
Cras mattis consectetur purus sit amet fermentum.
Cum sociis natoque penatibus et magnis dis parturient montes.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia.
Donec id elit non mi porta gravida at eget metus.

<ul class="input-list">
  <li class="input-item">
    <input id="radio-id" name="radio-name" type="radio" class="input input-radio input-radio-inverse" checked />
    <label for="radio-id" class="input-label-inverse">Radio Button Inverse Label</label>
  </li>
</ul>

Caution Radio-Button Lists

Useful when you want to the user to proceed with caution about the choices they’re making.

<ul class="input-list">
  <li class="input-item">
    <input id="radio-id" name="radio-name" type="radio" class="input input-radio input-radio-caution" checked />
    <label for="radio-id" class="input-label">Radio Button Caution Label</label>
  </li>
</ul>

Radio-Checkbox Button Lists

Yep, that’s exactly what it sounds like. It behaves like a radio button but looks a bit like a checkbox. Fancy!

<ul class="input-list">
  <li class="input-item">
    <input id="radio-id" name="radio-name" type="radio" class="input input-radio-checkbox" checked />
    <label for="radio-id" class="input-label">Radio Button Label</label>
  </li>
</ul>

Radio Buttons Nested in Buttons

<!-- Secondary button with a radio button in the unchecked state. -->
<button class="btn btn-secondary">
  <input type="radio" class="input input-radio mr-5" />
  Button Text
</button>

<!-- CTA button with a radio-checkbox in the checked state. -->
<button class="btn btn-cta">
  <input type="radio" class="input input-radio-checkbox input-radio-inverse mr-5" checked />
  Button Text
</button>