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
<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>
<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>
<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
|