Checkboxes
Checkboxes allow users to select one or more items from a set, or turn an option on or off. Users can choose any number of items including 0.
Checkboxes imply the items are related, and take up less visual space. It makes it easier to compare available options.
Component data
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files | coc-card-item.js
Functional grouping: Forms
Demo
Configure: select the dropdowns below to display the variety of options that checkboxes support.
Code
Responsive preview
Usage best practices
It is recommended to lay out the list of options vertically, with one item per line. If you must use a horizontal layout, be sure the space out each item (button control and the label) very clearly.
Consider using checkboxes when:
- users are expected to select any number of options from a list
- there is a single option that the user can turn on and off
Usage examples:
- email subscription
- terms and conditions agreement
Related components:
Do
Ensure checkbox control (the box) is large enough for mouse clicking and finger pressing.
Ensure selections are adequately spaced for touch screens.
Use positive and active wording for labels, so user know what exactly will happen if they turn on the checkbox.
Add hints such as “Select all that apply” to let users know how many options they can select.
Don't
Do not use checkboxes when only one item is allowed to be selected; use radio buttons instead.
Do not use checkboxes for mutually exclusive choices; use radio buttons instead.
Do not use images with important details close to the top, bottom or sides of the image, as they could get cropped out at different screen sizes.
Do not preselect options to avoid perceived bias.
Avoid negation such as "I do not wish to receive notification", which increases cognitive load and could mislead the users.