Checkboxes

Checkboxes allow multiple selections from a set of options.

Remix

Documentation

Components

Label

Checkboxes

Checkboxes allow multiple selections from a set of options.

Remix

Documentation

Components

Label

Checkboxes

Checkboxes allow multiple selections from a set of options.

Remix

Overview

A checkbox is an input control that allows a user to select one or more options from a number of choices. Each checkbox works independently from other checkboxes in the list, therefore checking an additional box does not affect any other selections.

When to use

In forms, in modals, or on side panels.
When multiple choices are available, and users can choose zero, one, or multiple items from a list.
When seven or fewer related items can be selected from a list.
When the user needs to confirm, save changes, or take explicit action.
When the user can enable or disable a single feature.

When not to use

The user can only choose one item from a list. In this case, use radio button instead.
Each of the items represents an independent feature or behavior and is not related to each other.
The user does not need to confirm, save, or take explicit action.
The user requires an immediate response or change in the settings. In this case, use the toggle switch component instead.

Anatomy

The checkbox component is comprised of a checkbox label and a checkbox input. If there is a group of checkboxes, a group label can be added.

Structure

Group label (optional): Communicates what needs to be selected below.
Checkbox input: A checkbox input indicating the appropriate state. By default it is unselected.
Checkbox label: Describes the information you want to select or unselect.

Alignment

Checkboxes can be grouped in horizontal or vertical orientations for users to pick from a set of related options.

In the case of a checkbox grouping, the layout can be either vertical or horizontal depending on the UI's structure and intended use. Whenever feasible, it is recommended to arrange checkbox and radio button groups vertically to facilitate readability.

Content

You should keep checkbox labels short and descriptive as much as you can. Start all checkbox labels with a capital letter and don't include punctuation after checkbox labels.

Group labels (optional)

In most cases, a set of checkboxes is preceded by a group label to provide further context or clarity.
A group label can either state the category of the grouping or describe what actions to take below.
Use sentence case for group labels.
In some cases, a group of checkboxes may be within a larger group of components that already have a group label. In this case, an additional group label for the checkbox component itself is not needed.

Checkbox labels

Always use clear and concise labels for checkboxes.
Labels appear to the right of checkbox inputs.

Behaviors

States

The checkbox input allows for a series of states: unselected, selected, and indeterminate. The default view of a set of checkboxes is having no option selected.

Checkbox interaction states are enabled, hovered, focused, disabled, and error. Checkbox selection states are checked, unchecked and indeterminate. Checkboxes can be configured to display checked, unchecked, or disabled by default. When using checkboxes, there should be no action that the user cannot undo by checking the box again.

Nesting

Checkboxes can be nested when a parent and child relationship is needed. Users can either select an entire set of options or only a subset.

Checking a parent will automatically activate and check all children. Unchecking a parent checkbox will deactivate and uncheck all children. If a group contains a mix of checked and unchecked children, the parent will show an indeterminate state. Use the Tree component if you would like collapsable and expandable nested checkboxes.