Skip Navigation

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.

Available in React

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.

When Not to Use

  • Do not use checkboxes for on/off selections that occur immediately. Consider using a Switch instead.

Examples

Examples

Default with Error

UH OH! You must choose one.


Indeterminate Checkbox


When to Use

  • Use when providing a “Check All” option with a sublist of checkbox options. The indeterminate state should be displayed when the sublist contains both checked and unchecked items.

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 checked> <!-- This has to be before .spark-checkbox__box! -->
    <span class="spark-checkbox__box"></span>
    <span class="spark-label">Check five...</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 six...</span>
  </label>
</fieldset>

<style type="text/css">
  
</style>

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>

<style type="text/css">
  
</style>

Indeterminate Checkbox

The indeterminate state of Checkboxes can only be set using Javascript. This is done by setting the indeterminate property to true as shown in the example below.

Note: Keep in mind that if submitting a form with an indeterminate checkbox, it will be as if the checkbox were unchecked, and no data would be submitted for that specific checkbox.

<fieldset class="example--indeterminate-checkbox">
  <label class="spark-checkbox">
    <input class="spark-checkbox__input" type="checkbox" name="example-all-things">
    <span class="spark-checkbox__box"></span>
    <span class="spark-label">All Things</span>
  </label>

  <div class="example-wrapper">
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" name="example-first-thing">
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">First Thing</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" name="example-second-thing" checked>
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Second Thing</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" name="example-third-thing">
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Third Thing</span>
    </label>
  </div>
</fieldset>

<style type="text/css">
  
  .example-wrapper {
  border-top: 2px solid #e1e2e5;
  padding-top: 1rem;
}


</style>
// Vanilla JS

// CUSTOM CODE ILLUSTRATING HOW TO SET INDETERMINATE CHECKBOX STATE

function getChecked(index) {
  checkedCount = 0;

  for (var k = 0, childArrLength = childCheckboxArr[index].length; k < childArrLength; k++) {
    if (childCheckboxArr[index][k].checked) {
      checkedCount++;
    }
  }
}

function updateDisplay(index) {
  getChecked(index);

  if(checkedCount === 0) {
    indeterminateArr[index].checked = false;
    indeterminateArr[index].indeterminate = false;
  } else if(checkedCount === childCheckboxArr[index].length) {
    indeterminateArr[index].checked = true;
    indeterminateArr[index].indeterminate = false;
  } else {
    indeterminateArr[index].checked = false;
    indeterminateArr[index].indeterminate = true;
  }
}

var exampleWrappers = document.querySelectorAll('.example--indeterminate-checkbox');
var indeterminateArr = [];
var childCheckboxArr = [];
var checkedCount = 0;

if (exampleWrappers) {
  for (var i = 0, wrappersLength = exampleWrappers.length; i < wrappersLength; i++) {
    indeterminateArr[i] = exampleWrappers[i].querySelector('label:first-child .spark-checkbox__input');
    childCheckboxArr[i] = exampleWrappers[i].querySelectorAll('.example-wrapper .spark-checkbox__input');

    for (var k = 0, childArrLength = childCheckboxArr[i].length; k < childArrLength; k++) {
      childCheckboxArr[i][k].addEventListener('change', updateDisplay.bind(null, i));
    }

    indeterminateArr[i].addEventListener('click', function(i) {
      getChecked(i);

      if (checkedCount === childCheckboxArr[i].length) {
        indeterminateArr[i].checked = false;

        for (var j = 0, len = childCheckboxArr[i].length; j < len; j++) {
          childCheckboxArr[i][j].checked = false;
        }
      } else if (checkedCount === 0) {
        indeterminateArr[i].checked = true;

        for (var j = 0, len = childCheckboxArr[i].length; j < len; j++) {
          childCheckboxArr[i][j].checked = true;
        }
      } else {
        indeterminateArr[i].checked = false;

        for (var j = 0, len = childCheckboxArr[i].length; j < len; j++) {
          childCheckboxArr[i][j].checked = false;
        }
      }
    }.bind(null, i));

    updateDisplay(i);
  }
}

Disabled Indeterminate Checkbox

<fieldset class="example--indeterminate-checkbox">
  <label class="spark-checkbox">
    <input class="spark-checkbox__input" type="checkbox" name="example-all-things" disabled>
    <span class="spark-checkbox__box"></span>
    <span class="spark-label">All Things</span>
  </label>

  <div class="example-wrapper">
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" name="example-first-thing" disabled>
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">First Thing</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" name="example-second-thing" checked disabled>
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Second Thing</span>
    </label>
    <label class="spark-checkbox">
      <input class="spark-checkbox__input" type="checkbox" name="example-third-thing" disabled>
      <span class="spark-checkbox__box"></span>
      <span class="spark-label">Third Thing</span>
    </label>
  </div>
</fieldset>

<style type="text/css">
  
  .example-wrapper {
  border-top: 2px solid #e1e2e5;
  padding-top: 1rem;
}


</style>
// Vanilla JS

// CUSTOM CODE ILLUSTRATING HOW TO SET INDETERMINATE CHECKBOX STATE

function getChecked(index) {
  checkedCount = 0;

  for (var k = 0, childArrLength = childCheckboxArr[index].length; k < childArrLength; k++) {
    if (childCheckboxArr[index][k].checked) {
      checkedCount++;
    }
  }
}

function updateDisplay(index) {
  getChecked(index);

  if(checkedCount === 0) {
    indeterminateArr[index].checked = false;
    indeterminateArr[index].indeterminate = false;
  } else if(checkedCount === childCheckboxArr[index].length) {
    indeterminateArr[index].checked = true;
    indeterminateArr[index].indeterminate = false;
  } else {
    indeterminateArr[index].checked = false;
    indeterminateArr[index].indeterminate = true;
  }
}

var exampleWrappers = document.querySelectorAll('.example--indeterminate-checkbox');
var indeterminateArr = [];
var childCheckboxArr = [];
var checkedCount = 0;

if (exampleWrappers) {
  for (var i = 0, wrappersLength = exampleWrappers.length; i < wrappersLength; i++) {
    indeterminateArr[i] = exampleWrappers[i].querySelector('label:first-child .spark-checkbox__input');
    childCheckboxArr[i] = exampleWrappers[i].querySelectorAll('.example-wrapper .spark-checkbox__input');

    for (var k = 0, childArrLength = childCheckboxArr[i].length; k < childArrLength; k++) {
      childCheckboxArr[i][k].addEventListener('change', updateDisplay.bind(null, i));
    }

    indeterminateArr[i].addEventListener('click', function(i) {
      getChecked(i);

      if (checkedCount === childCheckboxArr[i].length) {
        indeterminateArr[i].checked = false;

        for (var j = 0, len = childCheckboxArr[i].length; j < len; j++) {
          childCheckboxArr[i][j].checked = false;
        }
      } else if (checkedCount === 0) {
        indeterminateArr[i].checked = true;

        for (var j = 0, len = childCheckboxArr[i].length; j < len; j++) {
          childCheckboxArr[i][j].checked = true;
        }
      } else {
        indeterminateArr[i].checked = false;

        for (var j = 0, len = childCheckboxArr[i].length; j < len; j++) {
          childCheckboxArr[i][j].checked = false;
        }
      }
    }.bind(null, i));

    updateDisplay(i);
  }
}

Right-to-Left Support

<fieldset class="row" dir="rtl">
  <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">בדוק אחד</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">בדוק שניים</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">בדוק שלושה</span>
  </label>
</fieldset>

<style type="text/css">
  
</style>