Checkbox

Checkboxes allow users to select one or more items from a set.

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.

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

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.

A list of users with checkboxes alongside each one
A list of users with checkboxes alongside each one

Do

Use checkboxes to allow users select one or more options from a list with related items.

A list of users
A list of users

Don't

Do not use switches; they imply enabling/disabling an item and take up more visual space.