Checkboxes: Design Guidelines

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.

What Are Checkboxes?

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.

Checkbox List

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 Checkbox Lists

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.

Checkboxes vs. Alternative Input Fields

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.

	Example Uses	Available Items	Available selections	Selection functionality
Checkbox List	Selecting which pizza toppings you’d like	Multiple	0 – all	Independent of each other
Standalone Checkbox	Agreeing to a privacy policy	2 (selected/unselected)	1	Mutually exclusive
Nested Checkboxes	Selecting passengers to check into a flight	Multiple	0 – all	Parent selection is dependent on child selections
Radio Buttons	Selecting which pizza crust type you’d like	Few options	1	Mutually exclusive
Dropdowns	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.

Make the Label Selectable

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).

Use Positively Worded Labels

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’t do 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.

Instruct Users to Select All that Apply

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.

Clearly State Any Minimum- or Maximum-Selection Requirements

Do users need to select at least one item from the list? Or to select no more than 3?

Clearly state any requirements in the instructions and provide real-time visual feedback when the requirements have been satisfied or violated.

List Items Vertically

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.

Guidelines for Standalone Checkboxes

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.

This is a deceptive pattern and should be avoided.

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.