Checkboxes

A checkbox allows a user to select one or more items from a set of options. It may also be used to agree to a statement.

Default Checkbox Example


When to Use

  • Use when the user may select one or more items from a predetermined list of options.
  • Use when the options are relatively simple/short in length.

Variations

When Not to Use

  • Do not use checkboxes for a single on/off selection. Consider using a switch instead.

Variations

Default with Error

UH OH! You must choose one.


Developer Notes

Order Matters: The <input> element must be the first item inside of the checkbox container. Otherwise the disabled state will not work properly.

Default

<fieldset class="row">
  <label class="col-xs-12 spark-checkbox">
    <input class="spark-checkbox__input" type="checkbox"> <!-- This has to be before .spark-checkbox__box! -->
    <span class="spark-checkbox__box"></span>
    <span class="spark-label">Check one...</span>
  </label>
  <label class="col-xs-12 spark-checkbox">
    <input class="spark-checkbox__input" type="checkbox"> <!-- This has to be before .spark-checkbox__box! -->
    <span class="spark-checkbox__box"></span>
    <span class="spark-label">Check two...</span>
  </label>
  <label class="col-xs-12 spark-checkbox">
    <input class="spark-checkbox__input" type="checkbox"> <!-- This has to be before .spark-checkbox__box! -->
    <span class="spark-checkbox__box"></span>
    <span class="spark-label">Check three...</span>
  </label>
  <label class="col-xs-12 spark-checkbox">
    <input class="spark-checkbox__input" type="checkbox"> <!-- This has to be before .spark-checkbox__box! -->
    <span class="spark-checkbox__box"></span>
    <span class="spark-label">Check four...</span>
  </label>
  <label class="col-xs-12 spark-checkbox">
    <input class="spark-checkbox__input" type="checkbox" disabled> <!-- This has to be before .spark-checkbox__box! -->
    <span class="spark-checkbox__box"></span>
    <span class="spark-label">Check five...</span>
  </label>
</fieldset>

Default with Error

UH OH! You must choose one. 
<fieldset class="row spark-checkbox-group" data-error>
  <div class="col-xs-12">
    <span class="spark-checkbox-group__message"><b>UH OH!</b> You must choose one.</span>
  </div>
  <label class="col-xs-12 spark-checkbox">
    <input class="spark-checkbox__input" type="checkbox"> <!-- This has to be before .spark-checkbox__box! -->
    <span class="spark-checkbox__box"></span>
    <span class="spark-label">Check one...</span>
  </label>
  <label class="col-xs-12 spark-checkbox">
    <input class="spark-checkbox__input" type="checkbox"> <!-- This has to be before .spark-checkbox__box! -->
    <span class="spark-checkbox__box"></span>
    <span class="spark-label">Check two...</span>
  </label>
  <label class="col-xs-12 spark-checkbox">
    <input class="spark-checkbox__input" type="checkbox"> <!-- This has to be before .spark-checkbox__box! -->
    <span class="spark-checkbox__box"></span>
    <span class="spark-label">Check three...</span>
  </label>
  <label class="col-xs-12 spark-checkbox">
    <input class="spark-checkbox__input" type="checkbox"> <!-- This has to be before .spark-checkbox__box! -->
    <span class="spark-checkbox__box"></span>
    <span class="spark-label">Check four...</span>
  </label>
</fieldset>