Checkbox
Checkboxes allow users to select one or more items from a set.
<input type="checkbox" />
<input type="checkbox" checked="true" />
<input type="checkbox" class="js-indeterminate" />
<script>
Array.from(document.getElementsByClassName('js-indeterminate')).forEach(el => el.indeterminate = true)
</script>
Note: Javascript is used to implement the indeterminate state
States
To disable a checkbox, add the following class:
| Attribute | Type | |
|---|---|---|
disabled
|
Disabled | Use whenever clicking on a checkbox isn’t allowed. |
<input type="checkbox" disabled />
<input type="checkbox" checked="true" disabled />
<input type="checkbox" disabled class="js-indeterminate" />
<script>
Array.from(document.getElementsByClassName('js-indeterminate')).forEach(el => el.indeterminate = true)
</script>
Note: Javascript is used to implement the indeterminate state
Sizes
There are three sizes of checkboxes; small, medium and large. Each size has its own purpose, so make sure you use every size correctly.
| class | Type | |
|---|---|---|
is-small
|
Small | |
| - | Medium | |
is-large
|
Large |
<input type="checkbox" class="is-small" />
<input type="checkbox" />
<input type="checkbox" class="is-large" />
<br />
<input type="checkbox" class="is-small js-indeterminate" />
<input type="checkbox" class="js-indeterminate" />
<input type="checkbox" class="is-large js-indeterminate" />
Note: Javascript is used to implement the indeterminate state
Best Practice
We recommend checkboxes next to labels should have at minimum 8px of space in between for legibility. Checkboxes should be aligned to the center of a single line of text. If there are multiple lines in a label should be aligned to the center of the first line in the label.
Checkboxes allow users to select multiple items from a set.
Do
Use checkboxes to allow users select one or more options from a list with related items.
Don't
Do not use switches; they imply enabling/disabling an item and take up more visual space.