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__item">
        <div class="flix-radio">
            <input type="radio" class="flix-radio__input" 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 type="radio" class="flix-radio__input" 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 type="radio" class="flix-radio__input" 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 type="radio" class="flix-radio__input" name="example-radio" id="tonkotsu" value="Tonkotsu"/>
            <label class="flix-radio__label" for="tonkotsu">Tonkotsu</label>
        </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__item">
    <div class="flix-radio flix-radio--error">
      <input type="radio" class="flix-radio__input" 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 type="radio" class="flix-radio__input" 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>
  <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__item">
    <div class="flix-radio flix-radio--sm">
      <input type="radio" class="flix-radio__input" 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 type="radio" class="flix-radio__input" 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>
  <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__item">
      <div class="flix-radio">
          <input type="radio" class="flix-radio__input" 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 type="radio" class="flix-radio__input" name="example-horizontal-radio" checked="" id="horizontal-please" value="Please"/>
          <label class="flix-radio__label" for="horizontal-please">Please!</label>
      </div>
  </div>
</fieldset>
Made with 🍯 by FlixMobility 2023