Checkbox group
Allows users to select multiple options from a set of checkboxes.
Examples
Usage
Use checkbox groups for a list of options where the user can select zero, one, or more choices that are independent of each other.
Do:
- layout the list of checkboxes vertically
- align the checkbox to the left of the checkbox label
- use subheadings to break down a long list of checkboxes into logical groups
- use the label tag in HTML, so the user can select the option using both the checkbox and label
- provide a clear hint such as “Select all that apply” to help users understand they can choose multiple options from a list of checkboxes, as this may not be obvious
- keep hint text to a single sentence without full stop
- if ‘none’ is a valid response to a question, include it as an option, selecting this should unselect the other checkboxes in the group
- make sure the checkbox group is keyboard accessible and screen reader compatible
Avoid:
- using the checkbox group component if you want a user to select one option out of a list, instead use radio buttons
- using negations in labels such as 'Don’t send me newsletters'
- using a checkbox group to toggle a single option on and off, instead use a checkbox
References
NN/g Nielsen Norman Group
Checkboxes vs. Radio Buttons
UX Planet
Checkbox vs Toggle Switch
Parameters for turas-checkbox-group
- asp-for - Binds the checkbox group to a model property
- asp-items - Specifies the list of items to be displayed in the checkbox group
- guidance-text - Provides additional guidance text for the checkbox group
- additional-classes - Allows for custom CSS classes to be added to the checkbox group
- collapses - Indicates that the guidance text can be collapsed
Close without saving
Are you sure you want to close without saving?
Any information you have entered will be lost!
Testing
Check that the checkbox group:
- can be used with a keyboard only, using Tab to enter or leave the checkbox group, Space to select an option with no keyboard traps
- shows a visible focus state on the checkbox group that has keyboard focus
- focus moves logically in and out of the checkbox group
- screen readers announce the question, each option and which option is selected
- hint text or instructions are read out by screen readers
- error messages are announced by screen readers and associated with the checkbox group
- selecting an option does not automatically submit the form, move focus or take users to another page
- users are told when they must select an option
- remains usable at 400% zoom and supports reflow without horizontal scrolling
- makes it clear when selecting an option will reveal additional fields
- users can select an option by clicking or tapping its label
Developer considerations
When using the checkbox group component in your form:
- wrap related checkboxes in a <fieldset>
- use a <legend> to provide the question or context for the group
- give each checkbox a unique id and associate it with its <label>
- always provide a visible label for each checkbox
- make sure the checkbox group has a programmatic name
- make sure each checkbox has a meaningful value
- use aria-describedby on the <fieldset> to associate hint text or error messages with the checkbox group
- do not use aria-label to replace visible group headings
- avoid pre-selecting options unless there is a clear user benefit and it does not create a risk of unintended choices
- make sure custom checkbox components maintain native checkbox behaviour
- write error messages that explain what went wrong and how to fix it
- make sure the control works without JavaScript where possible
- make sure a visible focus state that meets contrast requirements
- make sure the component remains usable when text is resized and content reflows
- make sure sufficient touch target size and spacing, with a target size of at least 24 × 24 CSS pixels
Required fields
If your form contains fields that users must complete:
- clearly indicate when the checkbox group is required by using a visual indicator such as an asterisk
- do not rely on the visual indicator alone (for example, an asterisk) to communicate that a field is required and include the help text “Required fields are marked with an asterisk *” at the top of every page of the form
- make sure the required state of the checkbox group is programmatically available to assistive technologies using aria-required="true"
Conditional behaviour
If your checkbox group reveals additional content based on a user's selection:
- only reveal content when it is logically dependent on the selection
- do not automatically move focus when content is revealed
- place revealed content directly after the checkbox that controls it in the DOM
- hide the content from all users, including assistive technology users, until it is needed
- make sure hidden fields are not focusable
- when revealed, make sure the content is reachable in the natural tab order
- consider adding hint text to explain that additional fields may appear
- use the Turas conditional reveal pattern so the new content is available to screen readers