Spryker

Radio Button

Single-select control for mutually exclusive options.

Variants

Radio has two visual states. Always use in a group of two or more — never on its own.

VariantPurpose
UnselectedResting state. The option has not been chosen.
SelectedThe active choice in the group. Filled brand circle with a white dot.

Design tokens

TokenValueDescription
input/background/default
#ffffff
Unselected background
input/background/disabled
#f5f5f5
Disabled background
input/border/default
#aeaeae
Unselected border
input/border/hover
#a3a3a3
Hover border (unselected)
input/border/focus
#318272
Focus border
input/border/error
#bc1700
Error border
input/border/disabled
#cccccc
Disabled border
background/brand/primary
#318272
Selected fill
background/brand/hover
#226558
Selected hover fill
background/state/error/bold
#bc1700
Selected error fill
icon/inverse
#ffffff
Selected dot
icon/disabled
#656565
Selected disabled dot
size
18×18
Outer diameter
dot
10×10
Inner dot diameter
stroke-weight
2px
Border width

Guidelines

Do
  • Use for mutually exclusive choices — only one can be selected
  • Always group radios under a descriptive label or fieldset
  • List 2–7 options; more than 7 → use a Select
  • Pre-select the most likely or safest option
  • Use clear option labels in parallel phrasing
Don't
  • Use for multi-select — use Checkboxes instead
  • Leave the group with no default when one makes sense
  • Use a standalone radio without a group context
  • Use for yes/no questions — use a Toggle
  • List more than 7 options — switch to a Select
CheckboxToggle