Spryker

Checkbox

Multi-select control for boolean and indeterminate choices.

Variants

Checkbox has three visual variants. Indeterminate is reserved for parent rows where some children are checked.

VariantPurpose
UncheckedResting state. The option is not selected.
CheckedThe option is selected. White check on the brand fill.
Indeterminate"Select all" parent where some children are checked — never user-toggleable directly.

Design tokens

TokenValueDescription
background/brand/primary
#318272
Fill when checked or indeterminate
background/subtle
#f5f5f5
Fill when disabled + filled
border/default
#aeaeae
Unchecked border
border/brand
#318272
Hover / focus / checked border
border/state/error
#bc1700
Error border
border/disabled
#cccccc
Disabled border
icon/inverse
#ffffff
Check / dash mark colour
focus/color
rgba(46, 186, 186, 0.30)
Focus ring shadow
radius
3px
Corner radius (Figma)
stroke-weight
1.5px
Border width (Figma)
size
16×16
Box dimensions — single size

Guidelines

Do
  • Always pair with a visible label for accessibility
  • Use for multi-select — let users pick multiple options
  • Use indeterminate for "select all" when some items are selected
  • Group related checkboxes under a descriptive heading
  • Explain why a checkbox is disabled
Don't
  • Use for mutually exclusive options — use Radio instead
  • Use standalone without surrounding context
  • Hide the checked state visually
  • Use double negatives in labels (e.g. "Disable notifications")
  • Require more than one checkbox without a "select all" option
SelectRadio Button