Summary:
Checkboxes allow users to select one, some, or none of items from a list. They can be used standalone, in checkbox lists, or nested checkbox lists.
There are ample options for different kinds of fields when designing digital forms. Each serves a specific purpose, from radio buttons to dropdowns to open text fields. But if you want to offer users the flexibility of selecting one, multiple, or no items from a list, checkboxes are your friend.
A checkbox is a UI element that allows users to select between two states: checked and unchecked. When appearing in nested checkbox lists, a checkbox could also display a third, so-called "indeterminate" state, indicating that some but not all children of that checkbox were selected.
Checkbox List vs. Standalone Checkbox vs. Nested Checkboxes
There are three distinct checkbox applications, and each functions slightly differently.
Standalone Checkbox
This type of checkbox appears by itself. There are no other checkboxes around it, and it is frequently cordoned off in its own visually distinctive container. The checkbox and its label, in this case, demand attention and consideration on their own.
Standalone checkboxes are often used when a user must agree to an app’s terms and conditions. In this case, the checkbox field is typically indicated as required with a text label or red asterisk. The user is unable to move on without selecting their agreement.
Another common application is opting into email or SMS notifications in a checkout flow.
This is the most common application of checkboxes. In a checkbox list, each checkbox functions independently. The selection or deselection of a checkbox does not affect the selection status of others in the list. A checkbox list allows users the unique ability to select one, several, all, or no items from a list.
A checkbox list is useful when you want to allow users to select any number of items from a list, and you do not have reason to believe Select All will be a common selection.
Selecting ingredients in a food-ordering app or parameters in a faceted-search functionality are common applications of a checkbox list.
Nested checkboxes use a parent checkbox followed by a sublist of indented child checkboxes. This layout affords additional functionality beyond the previous applications because:
Users may select or deselect the parent checkbox, which would also select or deselect all the child checkboxes.
Users may select any of the child checkboxes independently. When some but not all the child checkboxes are selected, the parent checkbox displays an "indeterminate" state, usually signified with a hyphen.
Nested checkboxes are useful when you expect many users to select all the checkboxes in a list.
For example, in an airline check-in flow, the app might ask the user to "Select which passengers you’d like to check in." In this case, a parent checkbox might be labeled "All passengers," with child checkboxes for each individual passenger. The most common use case would be a person checking in their entire party, so using nested checkboxes aids the user experience.
In digital-form design, several elements allow for selecting particular items from a list. It is important to know which one is right for your needs.
Checkboxes differ from, but are often confused with, radio buttons. Amongst a list of radio buttons, only one button may be selected at a time. In order words, the selection of a nonselected radio button will, in turn, deselect any other previously selected option.
Selecting your title (e.g., Mr., Mrs., Ms., Miss, Mx)
Multiple
1
Mutually exclusive
Toggle Switches
Turning dark mode on and off
2 (on / off)
1
Mutually exclusive
Checkbox-Usability Guidelines
Use Standard Visual Conventions
Users expect checkboxes to look like checkboxes: squares (with or without rounded corners), with a checkmark to communicate selection. Designers should adhere to these conventions.
Never use circles as checkboxes. These are easily confused with radio buttons and should be avoided.
Don’t force users to click or tap on a too-small box to make their selection. Include a perimeter around the checkbox and make the label clickable to allow for adequate touch-target size (at least 1 cm x 1 cm).
Ensure that all your label statements are worded positively. Negatively worded statements force users to contemplate double negatives, leading to errors.
In the bad example below, when the item Do not send me marketing updates is unchecked, it essentially translates to Don’tdo not send me marketing updates — in other words, send me marketing updates.
Guidelines for Checkbox Lists and Nested Checkboxes
Present Items in a Logical Order
Present your list of checkbox items in a logical order to aid scannability and comprehension. Consider using subheads to break up a long list of checkboxes if possible.
While many people understand that checkboxes allow for the selection of multiple items, confusion persists. Consider your use case and target audience, and whether including the phrase Select all that apply would be valuable.
Some designers display checkbox items horizontally to save vertical space on the page. This approach decreases scannability and sometimes makes it difficult to align the labels with the appropriate checkbox. Display your list vertically.
Default to Unselected for Promotional or Legal Checkboxes
When presenting a checkbox for users to opt into various promotions, such as receiving marketing emails, many designers preset the default state of the checkbox to selected, forcing the user to take the action of unselecting the box to opt-out.
Similarly, when displaying checkboxes indicating agreement with legal statements such as terms and conditions, always set the checkbox's default state to unselected.
Ensure Both Possible States Are Intuitive, Opposites, and Unambiguous
Offering users the ability to select a checkbox requires a crystal-clear understanding of the selected and unselected states. If these states are not intuitive to the user, consider using alternative UI elements such as radio buttons or dropdowns.
