Select multiple options
Use checkboxes when users can choose more than one item from a list.
Components
Checkbox
Checkbox component is used when you require users to select multiple items from a list.
Show every choice
Visible options help users compare choices before they submit.
Group related choices
Use a shared label when several checkboxes answer the same question.
1
Checkbox control
2
Option label
State
A checkbox can be unchecked, checked, or indeterminate. Indeterminate is used when a parent represents a mixed selection of its children.
Indicates the option has been selected. Use when the user has actively opted in or the value is pre-selected by default.
Group
Use a checkbox group to bind related options under a single label. The group manages the consolidated value of the selected checkboxes.
A single checkbox used on its own. For example, to confirm a setting or accept terms.
Hint text
Add hint text to a checkbox group to explain what users are choosing or how the selection will be used.
Use when the choice needs additional context, such as how the data will be used or what selecting an option implies.
Disabled
Use the disabled state to prevent interaction when the option is not available in the current context.
Use when the option is temporarily unavailable. Disabled checkboxes appear muted and cannot be focused or toggled.
Validation feedback
When the group is invalid, surface inline feedback so users can correct the input. Use hasFeedback to control whether validation shows as text, style, or both.
No feedback styling. Use when the field has no validation requirements.
Design tokens used
Each row is a colour, spacing, or size value the component uses, and the right-most column tells you where in the component you'll see it.
sgds-form-padding-inline-sm—sgds-form-gap-md—sgds-form-gap-sm—sgds-checkbox-group-gap—sgds-form-border-width-defaultWidth variessgds-font-size-label-md—sgds-font-weight-regular—sgds-spacer-2—sgds-icon-size-md—sgds-form-border-radius-md—When to use
- Use this component to collect or change a specific piece of information in a predictable way.
- Use it when the SGDS control matches the type of response users need to provide.
When not to use
- Do not use this component when another SGDS control would reduce effort or make the choice clearer.
- Do not ask for more information, options, or steps than users need at that point in the task.
Use a single checkbox for one optional choice
Use a standalone checkbox when users are confirming or selecting one optional item within a form.
Do not use checkboxes for one required choice
If users must choose exactly one option, use radio buttons so the mutual exclusivity is clear.
Use checkbox groups for multi-select choices
Use checkboxes when users can select more than one option from the same set.
Do not use two checkboxes for a yes-or-no decision
A pair of Yes and No checkboxes lets users select both. Use radio buttons or one clearly labelled checkbox instead.
Use checkbox groups for multi-select choices
Use checkboxes when users can select more than one option from the same set.
Do not use two checkboxes for a yes-or-no decision
A pair of Yes and No checkboxes lets users select both. Use radio buttons or one clearly labelled checkbox instead.
Use checkbox groups for multi-select choices
Use checkboxes when users can select more than one option from the same set.
Do not use two checkboxes for a yes-or-no decision
A pair of Yes and No checkboxes lets users select both. Use radio buttons or one clearly labelled checkbox instead.
Use a clear group label
A shared label helps users understand what the checkbox options represent before they start selecting.
Do not overload a checkbox group
If the list is long or hard to scan, use select or combo box instead of showing every option as a checkbox.
Built-in accessibility
- Checkboxes render native checkbox inputs and reflect checked,
disabled, andinvalidstates. - Checkbox groups provide shared label, hint, and feedback areas.
Labels and content
- Write labels that describe the choice clearly.
- Use checkbox groups when users may select more than one option.
Focus and interaction
- Users should be able to move through each checkbox and its feedback text in order.
- Keep related checkboxes inside the same group when they answer one question.
TabShift+TabEnterSpaceHave suggestions or feedback?
Share them with us on Slack → #ask-sgds-v3
Found a bug or issue?
Report it on GitHub Issues → sgds/components/checkbox