Radio Menu

Default

The Radio Menu component allows you to style a group of radio buttons to add additional context and increase tap targets.

The layout is visually reminiscent of our Menu component, leveraging brand colors and thick chunky borders, while the individual items mimic our Stat component.

This example is shown in an iframe to accurately show the responsive behavior. Some browsers struggle with CSS transitions on iFramed content. You may see some animation glitches on this documentation page that do not occur when used outside of an iframe.

<div class="RadioMenu">
  <div class="RadioMenu-option">
    <input type="radio" name="default" id="default-0" value="amps" class="RadioMenu-input">

    <label class="RadioMenu-label" for="default-0">
      <span class="RadioMenu-graphic" aria-hidden="false">
        100
      </span>

      <span class="RadioMenu-text">
        Amps
      </span>
    </label>
  </div>
  <div class="RadioMenu-option">
    <input type="radio" name="default" id="default-1" value="amps" class="RadioMenu-input">

    <label class="RadioMenu-label" for="default-1">
      <span class="RadioMenu-graphic" aria-hidden="false">
        150
      </span>

      <span class="RadioMenu-text">
        Amps
      </span>
    </label>
  </div>
  <div class="RadioMenu-option">
    <input type="radio" name="default" id="default-2" value="amps" class="RadioMenu-input">

    <label class="RadioMenu-label" for="default-2">
      <span class="RadioMenu-graphic" aria-hidden="false">
        200
      </span>

      <span class="RadioMenu-text">
        Amps
      </span>
    </label>
  </div>
  <div class="RadioMenu-option">
    <input type="radio" name="default" id="default-3" value="i-m-not-sure" class="RadioMenu-input">

    <label class="RadioMenu-label" for="default-3">
      <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true" class="RadioMenu-graphic">
        <path d="M15.09,2H4.91A2.89,2.89,0,0,0,2,4.88V14.1A2.89,2.89,0,0,0,4.91,17H6.46A3.8,3.8,0,0,1,5.8,18.8c-.33.38.22.41.43.36a6.3,6.3,0,0,0,2.23-1.3L9.24,17h5.85A2.89,2.89,0,0,0,18,14.1V4.88A2.89,2.89,0,0,0,15.09,2ZM10.92,13.88a.6.6,0,0,1-.6.6H8.83a.6.6,0,0,1-.6-.6v-1.1a.6.6,0,0,1,.6-.6h1.5a.6.6,0,0,1,.6.6Zm3-5.93c0,.93-.66,1.42-2,2.28l-.77.49a.32.32,0,0,0-.17.3v.27H8.83a.6.6,0,0,1-.6-.6v0c0-1,1-1.63,2.06-2.35L11,7.83a.36.36,0,0,0,.17-.32V7a.26.26,0,0,0-.26-.26H9.06A.26.26,0,0,0,8.8,7v.26a.6.6,0,0,1-.6.6H6.71a.6.6,0,0,1-.6-.6V6.4A2,2,0,0,1,8.06,4.45h3.88A2,2,0,0,1,13.89,6.4Z" />
      </svg>

      <span class="RadioMenu-text">
        I'm Not Sure
      </span>
    </label>
  </div>
</div>

Colored Graphics

If you include colored graphics within your Radio Menu options, they'll be displayed in grayscale until their options are selected.

Usage On Light Backgrounds

The Radio Menu uses a transparent black for borders so it can be used on different light backgrounds. It works best on white and silver backgrounds.