Skip to main contentSkip to site searchSkip to component search
Honeycomb

Radio

Radios can be used when users need to select a single option from a list.

Default layout

Your favorite Ramen taste? 
<fieldset class="flix-fieldset">
    <legend class="flix-legend">Your favorite Ramen taste?</legend>
    <div class="flix-fieldset__items">
        <div class="flix-fieldset__item">
            <div class="flix-radio">
                <input class="flix-radio__input" type="radio" name="example-radio" id="shio" value="Shio"/>
                <label class="flix-radio__label" for="shio">Shio</label>
            </div>
        </div>
        <div class="flix-fieldset__item">
            <div class="flix-radio">
                <input class="flix-radio__input" type="radio" name="example-radio" checked id="shoyu" value="Shoyu"/>
                <label class="flix-radio__label" for="shoyu">Shoyu</label>
            </div>
        </div>
        <div class="flix-fieldset__item">
            <div class="flix-radio">
                <input class="flix-radio__input" type="radio" name="example-radio" id="miso" value="Miso"/>
                <label class="flix-radio__label" for="miso">Miso</label>
            </div>
        </div>
        <div class="flix-fieldset__item">
            <div class="flix-radio">
                <input class="flix-radio__input" type="radio" name="example-radio" id="tonkotsu" value="Tonkotsu"/>
                <label class="flix-radio__label" for="tonkotsu">Tonkotsu</label>
            </div>
        </div>
    </div>
</fieldset>

Variations

Individual radios can have "error" and "disabled" states (flix-radio--error, flix-radio--disabled modifiers). You can also trigger a smaller version with flix-radio--sm modifier.

Additional information that is related to the choice can be displayed within flix-radio__info element. Normally for groups of radios it makes more sense to use flix-fieldset__info (as shown in example).

Invalid radio
Something went wrong 
<fieldset class="flix-fieldset flix-fieldset--error">
  <legend class="flix-legend">Invalid radio</legend>
  <div class="flix-fieldset__items">
      <div class="flix-fieldset__item">
        <div class="flix-radio flix-radio--error">
          <input
            class="flix-radio__input"
            type="radio"
            name="example-radio-error"
            id="example-radio-error-first"
            required
            aria-invalid="true"
            aria-errormessage="example-radio-error-message"
            value="Shio"
          />
          <label class="flix-radio__label" for="example-radio-error-first">Shio</label>
        </div>
      </div>
      <div class="flix-fieldset__item">
        <div class="flix-radio flix-radio--error">
          <input
            class="flix-radio__input"
            type="radio"
            name="example-radio-error"
            id="example-radio-error-second"
            required
            aria-invalid="true"
            aria-errormessage="example-radio-error-message"
            value="Miso"
          />
          <label class="flix-radio__label" for="example-radio-error-second">Miso</label>
        </div>
      </div>
  </div>
  <span class="flix-fieldset__info" id="example-radio-error-message" aria-live="assertive">Something went wrong</span>
</fieldset>

A few things to keep in mind when working with error states:

  • Add appropriate --error modifiers to your fieldset and radio elements to enable error visual appearance;
  • Add aria-invalid to the radio input to inform assistive technologies that an error occured;
  • Finally, connect your error message with the invalid input with an id and aria-errormessage;
  • Add aria-live="assertive" to your error message to inform assistive technologies to read the error right away;
Small radio
Having a small set of options is precious 
<fieldset class="flix-fieldset">
  <legend class="flix-legend">Small radio</legend>
  <div class="flix-fieldset__items">
      <div class="flix-fieldset__item">
        <div class="flix-radio flix-radio--sm">
          <input
            class="flix-radio__input"
            type="radio"
            name="example-small-radio"
            id="small-yes"
            aria-describedby="small-description"
            value="yes"
          />
          <label class="flix-radio__label" for="small-yes">Yes</label>
        </div>
      </div>
      <div class="flix-fieldset__item">
        <div class="flix-radio flix-radio--sm">
          <input
            class="flix-radio__input"
            type="radio"
            name="example-small-radio"
            id="small-no"
            aria-describedby="small-description"
            value="no"
          />
          <label class="flix-radio__label" for="small-no">Nope</label>
        </div>
      </div>
  </div>
  <span class="flix-fieldset__info" id="small-description">Having a small set of options is precious</span>
</fieldset>

Horizontal layout

We use flix-fieldset element in order to display sets of radio buttons. It's possible to display controls in both vertical and horizontal manner. By default, every element is placed on a new line, adding a flix-fieldset--horizontal modifier displays them horizontally in columns.

Horizontal radios 
<fieldset class="flix-fieldset flix-fieldset--horizontal">
  <legend class="flix-legend">Horizontal radios</legend>
  <div class="flix-fieldset__items">
      <div class="flix-fieldset__item">
          <div class="flix-radio">
              <input class="flix-radio__input" type="radio" name="example-horizontal-radio" id="horizontal-yes" value="Yes"/>
              <label class="flix-radio__label" for="horizontal-yes">Yes!</label>
          </div>
      </div>
      <div class="flix-fieldset__item">
          <div class="flix-radio">
              <input class="flix-radio__input" type="radio" name="example-horizontal-radio" checked id="horizontal-please" value="Please"/>
              <label class="flix-radio__label" for="horizontal-please">Please!</label>
          </div>
      </div>
  </div>
</fieldset>

Related Components