Checkbox
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)
Section titled “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
Section titled “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 theforattribute 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
Section titled “Properties”Size : Small by State
Section titled “Size : Small by State”Checkbox
Border radius: 0
.item/checkbox
State: Default
Radio button label
Text color:
color-foreground-neutral-default#333333color-foreground-neutral-default#282830 Text style: Body/7-default
number
Text color:
color-foreground-neutral-default#333333color-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#000000color-foreground-neutral-emphasis#15151b Text style: Body/7-default
number
Text color:
color-foreground-neutral-emphasis#000000color-foreground-neutral-emphasis#15151b Text style: Body/7-default
Disabled
.item/checkbox
State: Disabled
Radio button label
Text color:
color-foreground-neutral-subtle#4d4d4dcolor-foreground-neutral-subtle#6c7073 Text style: Body/7-default
number
Text color:
color-foreground-neutral-subtle#4d4d4dcolor-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#4d4d4dcolor-foreground-neutral-subtle#6c7073 Text style: Body/7-default
number
Text color:
color-foreground-neutral-subtle#4d4d4dcolor-foreground-neutral-subtle#6c7073 Text style: Body/7-default
Focus
Checkbox
Border color:
color-border-focus-neutral-default#0072f0color-border-focus-neutral-default#0072f0 Border weight: 2
Border radius: 2
Checkbox
Size: Small
Size : Large by State
Section titled “Size : Large by State”Checkbox
Border radius: 0
.item/checkbox
State: Default
Radio button label
Text color:
color-foreground-neutral-default#333333color-foreground-neutral-default#282830 Text style: Body/6-default
number
Text color:
color-foreground-neutral-default#333333color-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
Section titled “.item/checkbox : State”Checkbox
Border color:
color-border-neutral-muted#a8aaaccolor-border-neutral-muted#a8aaac Border weight: 1
Hover
Checkbox
Background color:
color-fill-neutral-subtle#e5e3e1color-fill-neutral-subtle#6c7073Selected
Checkbox
Background color:
color-fill-neutral-emphasis#4d4d4dcolor-fill-neutral-emphasis#000000Disabled
Checkbox
Border color:
color-border-neutral-subtle#999999color-border-neutral-subtle#6c7073Disabled Selected
Checkbox
Border color:
color-border-neutral-subtle#999999color-border-neutral-subtle#6c7073Styling
Section titled “Styling”Colors
Section titled “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
Section titled “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) |
Accessibility
Section titled “Accessibility”For Design
Section titled “For Design”- All states (default, hover, selected, disabled, focus) must maintain accessible contrast.
- Focus styles must remain visible and meet WCAG AA contrast requirements. Focus should be clearly distinguishable from hover.
- Colour tokens used should be semantic (e.g.
foreground/neutral/default) rather than fixed values. This ensures the component adapts correctly to different themes or surfaces. - The interactive area (checkbox + label) must be large enough to support touch accessibility.
For Dev
Section titled “For Dev”To ensure the Checkbox meets WCAG 2.1 AA and supports assistive technologies, follow these implementation standards:
- Semantic HTML
- Use a native
<input type="checkbox">element. Do not recreate checkboxes using<div>or<span>. - The checkbox must be associated with a
<label>using theforattribute or by wrapping the input inside the label. - Avoid adding click handlers to non-semantic elements to toggle the checkbox.
- Use a native
- Keyboard Navigation
- The checkbox must be reachable using Tab navigation.
- Users must be able to toggle the checkbox using Space.
- Do not override default keyboard behaviour unless providing a fully accessible alternative.
- Focus Ring / Visible Focus
- The checkbox must display a visible focus style when focused via keyboard.
- The focus indicator must be clearly distinguishable and not rely only on colour.
- Never remove the browser default focus outline unless replacing it with an accessible equivalent.
- Focus styles must remain visible even when the checkbox is hovered or checked.
- Screen Reader Support
- The checkbox label must clearly describe the option or action it represents.
- Use
aria-describedbywhen additional helper text or error messages are present. - The checked and unchecked states must be correctly announced by assistive technologies.
- If the checkbox is disabled, ensure the disabled state is conveyed programmatically.
- Interaction Feedback
- The checked state must be communicated via the native
checkedattribute. - Visual changes (check icon, background, border) should reinforce state changes.
- Avoid relying solely on colour to indicate checked or unchecked status.
- Error states must be clearly communicated visually and programmatically.
- The checked state must be communicated via the native
- Responsive and Tap Targets
- The interactive area (checkbox + label) must be at least 44 px in height to support touch accessibility.
- Ensure sufficient spacing between checkboxes when presented in a list to avoid accidental activation.
Keyboard Navigation
Section titled “Keyboard Navigation”| Keys | Actions |
|---|---|
| Tab | Moves focus on the element or outside |
| Space | Activate or deactivate the element |
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.
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.