2.29 #Components.radio Radio

Toggle example guides Toggle HTML markup

A basic radio component.

Browser support: IE9+ (no transition), Safari6+, Firefox30+, Chrome30+

Obs: please do not reuse extends on this file for other components (apart from checkbox)

Markup
<div>
  <div class="sb-radio">
    <input type="radio" id="radio-1" class="sb-radio__input">
    <label class="sb-radio__label" for="radio-1">
      <span class="sb-radio__faux">
        <div class="sb-radio__circle"></div>
      </span>
      <span class="sb-radio__text">Basic radio.</span>
    </label>
  </div>
  <div class="sb-radio">
    <input type="radio" id="radio-2" class="sb-radio__input" disabled>
    <label class="sb-radio__label" for="radio-2">
      <span class="sb-radio__faux">
        <div class="sb-radio__circle"></div>
      </span>
      <span class="sb-radio__text">Basic disabled radio.</span>
    </label>
  </div>
  <div class="sb-radio">
    <input type="radio" id="radio-3" class="sb-radio__input" disabled checked>
    <label class="sb-radio__label" for="radio-3">
      <span class="sb-radio__faux">
        <div class="sb-radio__circle"></div>
      </span>
      <span class="sb-radio__text">Basic disabled and checked radio.</span>
    </label>
  </div>
</div>
Source: components/_radio.scss, line 1