Design

The Checkbox allows users to select one or multiple options from a list. Unlike radio buttons, checkboxes are non-exclusive and support multiple selections. It is used when more than one option can be valid, the selection does not require an immediate action, or the user needs to confirm or accept conditions.

This component is fully responsive and intentionally designed to be used across all viewports — mobile, tablet and desktop — with no alternative versions required.

When to use it (and when not to)

Use checkboxes when:

The user can select 0, 1, or multiple options.
Options are not mutually exclusive.
Dealing with preferences, filters, or settings.

Do not use checkboxes when:

Only one option can be selected (use radio buttons).
The action is binary and immediate (use a switch).

Quick summary of accessibility & consistency

Use native <input type="checkbox"> elements. Do not recreate checkboxes using <div> or <span>.
The checkbox must be associated with a <label> using the for attribute or by wrapping the input inside the label.
Make sure the checkbox is reachable using Tab navigation and toggleable using Space.
Display a visible focus style when focused via keyboard, clearly distinguishable and not relying only on colour.
The checked and unchecked states must be correctly announced by assistive technologies.

Properties

Size : Small by State

Checkbox

Border radius: 0

.item/checkbox

State: Default

Radio button label

Text color:

color-foreground-neutral-default#333333

color-foreground-neutral-default#282830

Text style: Body/7-default

number

Text color:

color-foreground-neutral-default#333333

color-foreground-neutral-default#282830

Text style: Body/7-default

Hover

.item/checkbox

State: Hover

Radio button label

Text style: Body/7-default

number

Text style: Body/7-default

Selected

.item/checkbox

State: Selected

Radio button label

Text color:

color-foreground-neutral-emphasis#000000

color-foreground-neutral-emphasis#15151b

Text style: Body/7-default

number

Text color:

color-foreground-neutral-emphasis#000000

color-foreground-neutral-emphasis#15151b

Text style: Body/7-default

Disabled

.item/checkbox

State: Disabled

Radio button label

Text color:

color-foreground-neutral-subtle#4d4d4d

color-foreground-neutral-subtle#6c7073

Text style: Body/7-default

number

Text color:

color-foreground-neutral-subtle#4d4d4d

color-foreground-neutral-subtle#6c7073

Text style: Body/7-default

Disabled Selected

Checkbox

Width: 126

.item/checkbox

State: Disabled Selected

Radio button label

Text color:

color-foreground-neutral-subtle#4d4d4d

color-foreground-neutral-subtle#6c7073

Text style: Body/7-default

number

Text color:

color-foreground-neutral-subtle#4d4d4d

color-foreground-neutral-subtle#6c7073

Text style: Body/7-default

Focus

Checkbox

Border color:

color-border-focus-neutral-default#c57046

color-border-focus-neutral-default#0072f0

Border weight: 2

Border radius: 2

Checkbox

Size: Small

Size : Large by State

Checkbox

Border radius: 0

.item/checkbox

State: Default

Radio button label

Text color:

color-foreground-neutral-default#333333

color-foreground-neutral-default#282830

Text style: Body/6-default

number

Text color:

color-foreground-neutral-default#333333

color-foreground-neutral-default#282830

Text style: Body/6-default

Hover

.item/checkbox

State: Hover

Radio button label

Text style: Body/6-default

number

Text style: Body/6-default

.item/checkbox : State

Checkbox

Border color:

color-border-neutral-muted#999999

color-border-neutral-muted#a8aaac

Border weight: 1

Hover

Checkbox

Background color:

color-fill-neutral-subtle#e5e3e1

color-fill-neutral-subtle#6c7073

Selected

Checkbox

Background color:

color-fill-neutral-emphasis#000000

Disabled

Checkbox

Border color:

color-border-neutral-subtle#666666

color-border-neutral-subtle#6c7073

Disabled Selected

Checkbox

Border color:

color-border-neutral-subtle#666666

color-border-neutral-subtle#6c7073

Styling

Colors

Name	Applied as	Applied to
`color-border-neutral-muted`	Border color	Checkbox (default)
`color-border-neutral-muted`	Border color	Checkbox (default)
`color-border-neutral-subtle`	Border color	Checkbox (disabled)
`color-border-neutral-subtle`	Border color	Checkbox (disabled)
`color-fill-neutral-emphasis`	Background color	Checkbox (selected)
`color-fill-neutral-emphasis`	Background color	Checkbox (selected)
`color-fill-neutral-subtle`	Background color	Checkbox (hover)
`color-fill-neutral-subtle`	Background color	Checkbox (hover)
`color-foreground-neutral-default`	Text color	Label (default / hover)
`color-foreground-neutral-default`	Text color	Label (default / hover)
`color-foreground-neutral-emphasis`	Text color	Label (selected)
`color-foreground-neutral-emphasis`	Text color	Label (selected)
`color-foreground-neutral-subtle`	Text color	Label (disabled)
`color-foreground-neutral-subtle`	Text color	Label (disabled)
`color-border-focus-neutral-default`	Border color	Checkbox (focus)
`color-border-focus-neutral-default`	Border color	Checkbox (focus)

Text Styles

Name	Applied as	Applied to
Lorem Ipsum `typography-body-6`	Text style	Label (large)
Lorem Ipsum `typography-body-6`	Text style	Label (large)

Usage

Do

Guidance on how to use a component.

Use checkboxes when the user can select 0, 1, or multiple options.
Use checkboxes for options that are not mutually exclusive.
Use checkboxes for preferences, filters, or settings.
Always associate a visible label with the checkbox.
Provide clear visual feedback for checked, unchecked, and disabled states.

Don’t

Guidance on what to avoid when using a component.

Don’t use checkboxes when only one option can be selected — use radio buttons instead.
Don’t use checkboxes when the action is binary and immediate — use a switch instead.
Don’t recreate checkboxes using <div> or <span> elements without appropriate ARIA roles.
Don’t rely solely on colour to indicate the checked or unchecked state.
Don’t remove the browser default focus outline unless replacing it with an accessible equivalent.