Checkbox
Checkboxes allow users to select one or more items from a set.
<input type="checkbox" />
<input type="checkbox" checked="true" />
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 />
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" checked="true" />
<input type="checkbox" class="is-large" />
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.