Modifiers
With help text
Add help text to further explain the checkbox’s or checkbox group’s function or meaning. Use help text if there is too much information to fit into the checkbox label or legend.
This is an example of help text. It can wrap to two lines, but try not to go longer than three.
With error message
If a checkbox selection throws an error, an error message will appear below the checkbox. If the error occurs within a checkbox group, the error will appear under the legend.
Check the single checkbox in the preview to clear the error message. Check two of the options in the checkbox group in the preview to clear the error message.
This is an example of an error message.
With help text and error message
If a checkbox requires help text and throws an error, an error message will appear above the help text.
Check the single checkbox in the preview to clear the error message. Check two of the options in the checkbox group in the preview to clear the error message.
This is an example of an error message.
This is an example of help text. It can wrap to two lines, but try not to go longer than three.
States
Disabled
A checkbox can be disabled if the experience requires it. The user’s selection will not be submitted with the form’s data.
If you need to disable a checkbox group, make sure the reason is obvious. If the reason is not obvious, you can keep the group enabled and add an error message to explain. The user’s selection within the checkbox group will not be submitted with the form’s data.
Usage
Checkboxes are used for one or more options that aren’t exclusive of each other. An unchecked checkbox represents a negative selection and a checked checkbox represents a positive selection.
Do:
- Mark checkboxes as required, if the user needs to make at least one selection
- Order checkbox lists vertically
- Use checkboxes for selections or settings
- Order checkbox groups vertically
Don't:
- Add too many options to a checkbox list — a good rule of thumb is if you have seven or more options, consider using a multi-select component instead
- Use checkboxes when only one option can be selected
- Use checkboxes for actions
- Add too many options to a checkbox group — a good rule of thumb is if you have seven or more options, consider using a multi-select component instead
Content guidelines
Do:
- Keep labels short, clear, and descriptive
- Use positive and active language
- Start labels with a capital letter
- Order options in a logical way, such as alphabetically, or by most or least frequently selected
- Arrange labels, whenever possible, to follow parallel syntax
Don't:
- Include punctuation after labels, unless the label is multiple sentences
User research
Study links
Primary sources (Boston Scientific user research)
No sources
Secondary sources
Accessibility
This component passes AAA WCAG standards. However, changes made by the content owner or implementer could impact accessibility compliance. Be sure to follow code standards, usage guidelines, and content guidelines to ensure that this component is fully accessible.
For more information, see WAI-ARIA Authoring Practices for checkboxes and Deque’s screen reader keyboard shortcuts and gestures documentation.