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.

CheckBox

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

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>
		
	

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>

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>

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>

Checkbox

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>

Checkbox Disabled

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>

Checkbox selected

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