Skip to main content

Checkbox

A component that allows users to select one or multiple options from a set. Checkboxes present a clear visual indication of the selected state, making them ideal for forms and settings.

Key Features​

  • Indeterminate state

    State represents a partial selection. It indicates that some, but not all, sub-options are selected, providing a clear and intuitive indication of complex selection scenarios.

  • Interactive feedback

    Responsive feedback for different interaction states, reassuring users of its functionality.

Variants​

The Checkbox is created with three parts: Checkbox Control, Label, and Helper Text. The Checkbox Control is an indicator for users when they change state by clicking or tapping.

The Label and Helper Text are optional, meaning you can choose to show or hide them as needed. The Label describes the checkbox choice, while the Helper Text provides extra guidance.

Label Component

Helper text Component

Checkbox anatomy
    1. Checkbox Control
    2. Label
    3. Helper Text
Selection variants

Offers three distinct variants - Unchecked, Checked, and Indeterminate - to clearly represent different selection states and accommodate diverse user interactions within the interface.

States

Provides visual feedback and enhances user awareness of interaction possibilities within the interface. That's why the Checkbox component features multiple states, adapting to its current usage context.

PropertyValuesDefault value
Variant
Unchecked, Checked, Indeterminate
Unchecked
Label
Yes / No
No
Helper Text
Yes / No
No
State
Normal, Hover, Focus, Alert, Alert Focus, Disabled
Normal

Grouping Options

Grouping Options

Behaviors​

Wrapping label

When the text is too long for the available horizontal space, it wraps to another line.

When use Helper Text

Use Helper Text if additional information is important and necessary to explain differences or to ensure that the user receives all the necessary information to take action.

Best Practices​

Multiple choice

Use checkboxes if the user has to make multiple selections or select nothing. If a single choice is required, use a Radio Button Component instead. 
Do
Don't

Progressive disclosure

Manage choice options wisely. If too many checkboxes are visible simultaneously, consider using progressive disclosure so that the user only sees additional options after further interaction with the UI. 
Do
Don't

Easy to scan

List checkboxes in a logical order so the user can easily find preferable options. Select the grouping option that is the most logical for your case (e.g., from most to least frequently selected, alphabetical, or other logical order).
Do
Don't

Content Guidelines​

Keep labels clear

Avoid extended labeling. Remember to make the text easy to understand and descriptive.
Do
Don't

Be consistent

Use sentence case in labels, starting each with a capital letter for readability. Avoid punctuation (at, the, end) of labels to prevent visual clutter and confusion. Consistently use one form of labeling - sentence, phrase, or word - throughout your interface. Mixing forms can lead to user confusion and disrupt the design's flow.
Do
Don't

Positive wording

Avoid negations in labels as they are often confusing for the user. When using sentences in labels, always try to use active and positive text indicating the meaning of the label.
Do
Don't