Component

Radio buttons are an essential form control that should be used to represent two or more mutually-exclusive choices. A radio signifies a user must make a choice.

iconsRadio Group

Pick a language 
<fieldset class="ray-fieldset">
  <legend class="ray-fieldset__legend">Pick a language</legend>
  <div class="ray-radio">
    <input
      id="radio-1"
      name="radio-button-story"
      type="radio"
      class="ray-radio__input"
    />
    <label class="ray-radio__label" for="radio-1">JavaScript</label>
  </div>

  <div class="ray-radio">
    <input
      id="radio-2"
      name="radio-button-story"
      type="radio"
      class="ray-radio__input"
    />
    <label class="ray-radio__label" for="radio-2">
      Ruby
    </label>
  </div>

  <div class="ray-radio">
    <input
      id="radio-3"
      name="radio-button-story"
      type="radio"
      class="ray-radio__input"
    />
    <label class="ray-radio__label" for="radio-3">
      GoLang
    </label>
  </div>
</fieldset>

iconsRadio Group (RTL)

אוכל מועדף 
<div dir="rtl">
  <fieldset class="ray-fieldset">
    <legend class="ray-fieldset__legend">אוכל מועדף</legend>
    <div class="ray-radio">
      <input
        id="rtl-radio-1"
        name="radio-button-story"
        type="radio"
        class="ray-radio__input"
      />
      <label class="ray-radio__label" for="rtl-radio-1">פיצה</label>
    </div>

    <div class="ray-radio">
      <input
        id="rtl-radio-2"
        name="radio-button-story"
        type="radio"
        class="ray-radio__input"
      />
      <label class="ray-radio__label" for="rtl-radio-2">פלאפל</label>
    </div>

    <div class="ray-radio">
      <input
        id="rtl-radio-3"
        name="radio-button-story"
        type="radio"
        class="ray-radio__input"
      />
      <label class="ray-radio__label" for="rtl-radio-3">סלט</label>
    </div>
  </fieldset>
</div>

iconsRadio Pill Group

Pick a language 
<fieldset class="ray-fieldset">
  <legend class="ray-fieldset__legend">Pick a language</legend>
  <div class="ray-radio-pill__wrapper">
    <div class="ray-radio-pill">
      <input
        id="radio-pill-1"
        name="radio-button-story"
        type="radio"
        class="ray-radio-pill__input"
      />
      <label class="ray-radio-pill__label" for="radio-pill-1">JavaScript</label>
    </div>

    <div class="ray-radio-pill">
      <input
        id="radio-pill-2"
        name="radio-button-story"
        type="radio"
        class="ray-radio-pill__input"
      />
      <label class="ray-radio-pill__label" for="radio-pill-2">
        Ruby
      </label>
    </div>

    <div class="ray-radio-pill">
      <input
        id="radio-pill-3"
        name="radio-button-story"
        type="radio"
        class="ray-radio-pill__input"
      />
      <label class="ray-radio-pill__label" for="radio-pill-3">
        GoLang
      </label>
    </div>
  </div>
</fieldset>

iconsRadio Pill Group (RTL)

אוכל מועדף 
<div dir="rtl">
  <fieldset class="ray-fieldset">
    <legend class="ray-fieldset__legend">אוכל מועדף</legend>
    <div class="ray-radio-pill__wrapper">
      <div class="ray-radio-pill">
        <input
          id="radio-pill-1"
          name="radio-button-story"
          type="radio"
          class="ray-radio-pill__input"
        />
        <label class="ray-radio-pill__label" for="radio-pill-1">פיצה</label>
      </div>

      <div class="ray-radio-pill">
        <input
          id="radio-pill-2"
          name="radio-button-story"
          type="radio"
          class="ray-radio-pill__input"
        />
        <label class="ray-radio-pill__label" for="radio-pill-2">
          פלאפל
        </label>
      </div>

      <div class="ray-radio-pill">
        <input
          id="radio-pill-3"
          name="radio-button-story"
          type="radio"
          class="ray-radio-pill__input"
        />
        <label class="ray-radio-pill__label" for="radio-pill-3">
          סלט
        </label>
      </div>
    </div>
  </fieldset>
</div>

iconsBest Practices

Source: Radio Buttons UX Design

iconsLogical Order For Options

You should list the options in a logical order, such as most likely to be selected to least, simplest operation to most complex, or least risk to most. Alphabetical ordering is not recommended because it is language dependent and therefore not localizable.

iconsOptions Should Be Comprehensive and Clearly Distinct

The biggest usability problems for radio buttons come from labels that are vague, misleading, or describe options that are impossible for average users to understand. Contextual help can alleviate the latter problem, but it’s still best to user test any important set of interaction controls.

iconsAlways Offer a Default Selection

One of the 10 heuristics of UI design says that users should be able to undo (and redo) their actions. This means enabling people to set a UI control back to its original state. In case of radio buttons this means that radio buttons should always have exactly one option pre-selected. Select the safest (to prevent loss of data or system access) and most secure and private option. If safety and security aren’t factors, select the most likely or convenient option.

If users might need to refrain from making a selection, you should provide a radio button for this choice, such as one labeled “None.” Offering users an explicit, neutral option to click is much better than requiring the implicit act of not selecting from the list.