Radio Boxes

Default

Radio Boxes provide a styled alternative to the browser default radio buttons. They work best when making a selection between a number of short options, like shirt size abbreviations.

<div class="RadioBoxes ">
  <div class="RadioBoxes-box">
    <input class="RadioBoxes-input" type="radio" value="Small" name="default" id="default-0">

    <label class="RadioBoxes-label" for="default-0">
      <span class="RadioBoxes-inner">
        S
      </span>
    </label>
  </div>
  <div class="RadioBoxes-box">
    <input class="RadioBoxes-input" type="radio" value="Medium" name="default" id="default-1">

    <label class="RadioBoxes-label" for="default-1">
      <span class="RadioBoxes-inner">
        M
      </span>
    </label>
  </div>
  <div class="RadioBoxes-box">
    <input class="RadioBoxes-input" type="radio" value="Large" name="default" id="default-2">

    <label class="RadioBoxes-label" for="default-2">
      <span class="RadioBoxes-inner">
        L
      </span>
    </label>
  </div>
  <div class="RadioBoxes-box">
    <input class="RadioBoxes-input" type="radio" value="Extra Large" name="default" id="default-3">

    <label class="RadioBoxes-label" for="default-3">
      <span class="RadioBoxes-inner">
        XL
      </span>
    </label>
  </div>
  <div class="RadioBoxes-box">
    <input class="RadioBoxes-input" type="radio" value="Extra Extra Large" name="default" id="default-4">

    <label class="RadioBoxes-label" for="default-4">
      <span class="RadioBoxes-inner">
        XXL
      </span>
    </label>
  </div>
</div>

Disabled Items

Individual Radio Boxes can be disabled when they can't be selected

Danger

The RadioBoxes--danger modifier can be used to mark an invalid state. Since this is a radio selection that usually means a required selection was not made. You'll need to handle removing this modifier with JavaScript when a valid selection is made.

Stretch

The RadioBoxes--stretch modifier will ensure the available space is split between options and they stretch to fill the available space. This is best used when the boxes are in a constrained space, or the option label text is long.