Office UI Fabric JS
Microsoft no longer supports this content and will not be responding to bugs or issues. We recommend using the newer version Office UI Fabric React as your front-end framework.

Overview

A Checkbox is a UI element that allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another control.

A Checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The control has two selection states: unselected and selected.

Use a single Checkbox for a subordinate setting, such as with a "Remember me?" login scenario or with a terms of service agreement.

For a binary choice, the main difference between a Checkbox and a toggle switch is that the Checkbox is for status and the toggle switch is for action. You can delay committing a Checkbox interaction (as part of a form submit, for example), while you should immediately commit a toggle switch interaction. Also, only Checkboxes allow for multi-selection.

Use multiple Checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.

Using this Component

  1. Confirm that you have references to Fabric's CSS and JavaScript on your page:

    			<link rel="stylesheet" href="fabric.min.css" />
    <link rel="stylesheet" href="fabric.components.min.css" />
    <script src="fabric.min.js"></script>
    		
  2. Copy the HTML from one of the samples below into your page. For example:

    <div class="ms-CheckBox">
      <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
      <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa">
        <span class="ms-Label">Checkbox</span> 
      </label>
    </div>
  3. Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all CheckBox components on the page:

    <script type="text/javascript">
      var CheckBoxElements = document.querySelectorAll(".ms-CheckBox");
      for (var i = 0; i < CheckBoxElements.length; i++) {
        new fabric['CheckBox'](CheckBoxElements[i]);
      }
    </script>
  4. Replace the sample HTML content with your content.

Variants

Default CheckBox
<div class="ms-CheckBox">
  <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
  <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa">
    <span class="ms-Label">Checkbox</span> 
  </label>
</div>
<script type="text/javascript">
  var CheckBoxElements = document.querySelectorAll(".ms-CheckBox");
  for (var i = 0; i < CheckBoxElements.length; i++) {
    new fabric['CheckBox'](CheckBoxElements[i]);
  }
</script>
Disabled CheckBox
<div class="ms-CheckBox">
  <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
  <label role="checkbox" class="ms-CheckBox-field is-disabled" tabindex="0" aria-checked="false" name="checkboxb" aria-disabled="true">
    <span class="ms-Label">Checkbox Disabled</span> 
  </label>
</div>
<script type="text/javascript">
  var CheckBoxElements = document.querySelectorAll(".ms-CheckBox");
  for (var i = 0; i < CheckBoxElements.length; i++) {
    new fabric['CheckBox'](CheckBoxElements[i]);
  }
</script>
Selected CheckBox
<div class="ms-CheckBox">
  <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
  <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="true" name="checkboxc">
    <span class="ms-Label">Checkbox selected</span> 
  </label>
</div>
<script type="text/javascript">
  var CheckBoxElements = document.querySelectorAll(".ms-CheckBox");
  for (var i = 0; i < CheckBoxElements.length; i++) {
    new fabric['CheckBox'](CheckBoxElements[i]);
  }
</script>

States

State Applied to Result
disabled attribute .ms-CheckBox-input
Disables the input.
checked attribute .ms-CheckBox-input
Fills in the checkbox or radio button.

Methods

Name Parameters Description
getValue()

None

Returns true or false whether the component is checked or not
toggle()

None

Toggles the component
check()

None

Sets component to checked
unCheck()

None

Sets component to unchecked
removeListeners()

None

Remove all event listeners from component