Checkbox Groups

Checkbox groups enable users to select multiple options from a predefined list, offering flexibility in choice and customization of preferences.

Overview

Usage

When to use this component?

Checkboxes are essential when users need to make one or multiple selections from a set of options. They are particularly useful in forms, settings, or any interface where multiple choices are permissible or required. Common applications include selecting various interests or preferences, or marking tasks as complete.

How it works

Checkboxes are usually arranged in groups, where each checkbox represents a distinct option that users can independently check or uncheck. Every checkbox consists of a square box accompanied by a label, and may include additional elements like subtitles or trailing icons to provide more context or highlight specific options.

Anatomy

Anatomy Options

Checkbox Icon: The visual checkbox element that indicates the selection state. Users can check or uncheck this icon to select or deselect an option.

Checkbox Title: The main label associated with the checkbox, providing a brief description of the option or action related to the checkbox.

Supporting Text: Positioned below the checkbox title, the supporting text offers additional context or supporting information about the checkbox option, helping users understand the checkbox's purpose.

Dos and Don'ts

Dos	Don'ts
Do label each checkbox clearly to ensure users understand what they are choosing.	Don't use vague or ambiguous labels that can confuse users about what they are selecting.
Do provide sufficient spacing between checkboxes to prevent selection errors.	Don't place checkboxes too closely together, which can lead to accidental selections.
Do use a logical grouping for related options to help users navigate the choices easily.	Don't mix unrelated options in a single group, as it can complicate the decision process.
Do include a 'Select All' option if appropriate, to simplify selections for larger lists.	Don't force users to select more options than they need; provide clear selections.
Use consistent spacing between cDo ensure that checkboxes are accessible, with keyboard navigability and screen reader support.	Don't ignore accessibility standards, making it difficult for all users to interact.
Do provide immediate visual feedback when a checkbox is selected or deselected.	Don't delay updates to the interface, which can confuse users about their selections.
Do consider using checkboxes with additional context like subtitles or icons when needed.	Don't overload checkboxes with too much information, which can overwhelm users.