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.