Checkbox

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-checkbox__bg" span -->
      <div class="ui-checkbox">
        <label>Label
          <input type="checkbox" name="a" value="a1" />
          <span class="ui-checkbox__bg"></span>
        </label>
      </div>

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

      <!-- partially selected variant -->
      <div class="ui-checkbox ui-checkbox--partial">
        <label>Label
          <input type="checkbox" name="a" checked>
          <span class="ui-checkbox__bg"></span>
        </label>
      </div>

      <!-- partially selected and disabled boxed variant -->
      <div class="ui-checkbox ui-checkbox--partial ui-checkbox--box">
        <label>Label
          <input type="checkbox" name="a" checked disabled>
          <span class="ui-checkbox__bg"></span>
        </label>
      </div>

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

Multiple radios

Usage

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

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

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

      <div class="ui-checkbox">
        <label>Label 3
          <input type="checkbox" name="b" value="b3" />
          <span class="ui-checkbox__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-checkbox__bg" span -->
      <div class="ui-checkbox">
        <label>First Label
          <input type="checkbox" name="a" value="a1" />
          <span class="ui-checkbox__bg ui-checkbox__bg--top-align"></span>
        </label>
      </div>

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

      <!-- partially selected variant -->
      <div class="ui-checkbox ui-checkbox--partial">
        <label>Second Label
          <input type="checkbox" name="a" checked>
          <span class="ui-checkbox__bg ui-checkbox__bg--boxed-top-align"></span>
        </label>
      </div>

      <!-- partially selected and disabled boxed variant -->
      <div class="ui-checkbox ui-checkbox--partial ui-checkbox--box">
        <label>Third Label
          <input type="checkbox" name="a" checked disabled>
          <span class="ui-checkbox__bg ui-checkbox__bg--boxed-top-align"></span>
        </label>
      </div>

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