Checkbox

ECT approvedUpdated May 23, 2026

Description

A checkbox is a simple visual indicator of a user's choice or choices.
A single checkbox lets a user choose between 2 mutually exclusive options.
A group of checkboxes lets a user select 1 or more options from a short list.
To use a checkbox for progressive disclosure, show top-level controls first, and then show more controls based on the user’s selection.

Warning

Choosing the right component Use Checkbox for choosing one or more options from a short list. For choosing a single option from a short list, use Button toggle - very short text label, bold visuals Radio button - longer label, still a single line Tile select - more space for richer content For choosing a single option from a long list, use Dropdown.

Component preview

Information

Loading Carbon component...

LabelCheckedDisabledInline label

Open in Storybook

Anatomy

Anatomy

Size

The checkbox is available in S, M and L sizes.

States

Warning

States are visual indicators used to communicate a component’s interaction status. Learn more about commonly used component states in our General specs

Component-specific states

Unselected

Selected

Indeterminate

Group orientation

A checkbox can be either single or grouped.
Grouped checkboxes can have a horizontal or vertical orientation.

Warning

For information on grouping checkboxes, see Fieldset.

Horizontal

Vertical

Variations

With icon

With secondary text

Progressive disclosure

Dos and don'ts

Don't

Technical example

Checkbox component implemented in Carbon.

Checkbox group component implemented in Carbon.

Requirements

Users should be able to:

Navigate to a checkbox using assistive technology.
Toggle the checkbox between checked and unchecked.
Receive feedback about the state of the checkbox.

Interactions

Keyboard interactions

Tab. Moves focus from the previous interactive element on the page to the checkbox.
Pressing tab again moves focus to the next checkbox, or the next interactive element on the page.
Space. Toggles the checkbox.

Design Considerations

Avoid using disabled checkboxes, as they can look very similar to enabled checkboxes. When users cannot toggle or focus a checkbox, it may cause confusion or frustration.
Checkbox labels should be placed inline, near to the checkbox.
Make sure that the border of the checkbox has a 3:1 minimum contrast ratio with its background.

Development Considerations

Read-only checkboxes are not valid under the HTML specification. Do not use readonly attributes on checkboxes.
Checkboxes should have clear, accessible names conveyed by their visible labels.
Make sure that checkboxes are associated with their labels using the for attribute on the label, and a unique id on the input.
Checkbox groups should be wrapped in a fieldset and have an overall label provided by a legend to identify the purpose of the checkbox group.
The legend must be a direct child of the fieldset element, otherwise the HTML will be invalid and may cause issues for screen reader users.

Date	Changes
09 October 2025	Added indeterminate state.Added 24px invisible hit area that sits underneath both the label and checkbox area on small sizes.Added a Don't to highlight the critical confirmation usecase.Marked as ECT approved.
October 2025	Added a variation: With secondary text.Removed disabled & read-only example from Dos and Don'ts. Guidance on states is available in General specs
August 2025	Updated guidance on the accessibility tab.
September 2024	New version created. Previous version archived in the frozen Product design system.