Checkbox
Checkboxes let users select zero, one or more options from a number of choices.
Published: Last updated:
Overview
Checkboxes are designed for multiple-choice selection, not for mutually exclusive options.
Each checkbox functions independently, meaning selecting one option does not affect the state of any others in the group.
When to use
Forms
Checkboxes can be used in forms across full pages, modals, or side panels to collect multiple selections.
Filtering and batch actions
Used to filter data on a page, within a menu, or inside a component. Commonly used in data tables to enable batch selection and editing.
Terms and conditions
Checkboxes can indicate agreement to terms, typically by toggling a single selection on or off.
Lists with sub-selections
Ideal for parent-child relationships, such as selecting groups of items. A parent checkbox can control all child items, checking it selects all, unchecking it deselects all. If some (but not all) children are selected, the parent checkbox enters an indeterminate state to reflect the partial selection.
When not to use
If the user can select only one option from a list, use radio buttons instead.
Checkboxes are designed for multiple selections, while radio buttons are intended for single-choice scenarios within a set.
Do use radio buttons when only one option can be selected from a group.
Don’t use checkboxes when only one option can be selected.
Anatomy
A single checkbox component includes a checkbox input and its associated label. When using a group of checkboxes, a group label can be added to describe the related options, maintaining consistency with other input types in the Buckholt Design System. Optional helper text or assistive text can also be included to provide additional guidance or context.
Alignment
Checkbox labels are positioned to the right of their inputs. Where possible, vertical alignment for both checkbox and radio groups are preferred, as it improves readability and scanability.
Group labels
- Most checkbox groups should be preceded by a group label to provide context or clarity.
- The label can describe the category of the options or explain the action the user should take.
- Use sentence case for all group labels.
- If the checkbox group is part of a larger component that already includes a label or heading, a separate group label for the checkboxes may not be necessary.
Checkbox labels
- Always use clear and concise labels that accurately describe the option.
- Labels are positioned to the right of their corresponding checkbox input.
- Even if a label is visually hidden, it must still be included in the code, whether for a single checkbox or a group. See the Code tab for implementation details.
Overflow content
- Keep checkbox labels concise, ideally under three words.
- If space is limited, consider rewording the label rather than truncating it.
- Do not use ellipses (…) to truncate label text.
- Longer labels may wrap to a second line, this is preferable to truncation.
- When wrapping occurs, the text should align beneath the checkbox, keeping the input and label top-aligned.
States
The checkbox input supports three states: unselected, selected, and indeterminate. By default, checkboxes are displayed in the unselected state, with no options pre-selected. The indeterminate state is typically used to indicate a partial selection, such as in parent-child checkbox groups.
Use the indeterminate state when a checkbox represents a group of sub-options where only some items are selected.
In addition to the unselected, selected, and indeterminate states, checkboxes also support the following interaction states: focus, disabled, read-only and error.
Group states
Checkbox groups can display the following states: read-only, disabled and error. They can also include Assistive and helper text to provide additional guidance or context.
Assistive / helper text in disabled and read-only states
Checkbox groups in disabled and read-only states do not require assistive / helper text because users cannot modify their content, eliminating the need for guidance on data entry. In these states, any necessary context should be provided through labels or surrounding content rather than additional helper text that might imply interactivity.
Mouse
Users can activate a checkbox by clicking either the checkbox input or its associated label. Making both regions clickable improves accessibility by increasing the interactive area. The only hover behaviour is a change in cursor to a pointer, indicating the element is clickable.
Keyboard
Users can navigate to and between checkbox inputs using Tab and Shift + Tab. To toggle a checkbox, press Space while the input has focus.