Radio

Basic

Usage

<!-- radio -->
<form class="ui-form">
  <fieldset>
    <div class="ui-form__group">

      <!-- the <label> is a wrapper for the radio input and empty span -->
      <!-- The radio input comes first and is immediately followed by a "ui-radio__bg" span -->
      <div class="ui-radio">
        <label>Label
          <input type="radio" name="a" value="a1" />
          <span class="ui-radio__bg"></span>
        </label>
      </div>

      <!-- boxed variant -->
      <div class="ui-radio ui-radio--box">
        <label>Label
          <input type="radio" name="a" value="a2" />
          <span class="ui-radio__bg"></span>
        </label>
      </div>

    </div>
  </fieldset>
</form>

Multiple radios

Usage

<!-- multiple radios -->
<form class="ui-form">
  <fieldset>
    <div class="ui-form__group">

      <!-- multiple "ui-radio" are nested inside the same "ui-form__group" -->
      <div class="ui-radio">
        <label>Label 1
          <input type="radio" name="b" value="b1" />
          <span class="ui-radio__bg"></span>
        </label>
      </div>

      <div class="ui-radio">
        <label>Label 2
          <input type="radio" name="b" value="b2" />
          <span class="ui-radio__bg"></span>
        </label>
      </div>

      <div class="ui-radio">
        <label>Label 3
          <input type="radio" name="b" value="b3" />
          <span class="ui-radio__bg"></span>
        </label>
      </div>

    </div>
  </fieldset>
</form>

With icon aligned top

Usage

<!-- radio -->
<form class="ui-form">
  <fieldset>
    <div class="ui-form__group">

      <!-- the <label> is a wrapper for the radio input and empty span -->
      <!-- The radio input comes first and is immediately followed by a "ui-radio__bg" span -->
      <div class="ui-radio">
        <label>First Label
          <input type="radio" name="a" value="a1" />
          <span class="ui-radio__bg ui-radio__bg--top-align"></span>
        </label>
      </div>

      <!-- boxed variant -->
      <div class="ui-radio ui-radio--box">
        <label>First Label
          <input type="radio" name="a" value="a2" />
          <span class="ui-radio__bg ui-radio__bg--boxed-top-align"></span>
        </label>
      </div>

    </div>
  </fieldset>
</form>