Spryker

Select

Dropdown selector for choosing one option from a list.

Variants

Select has two validation variants. Keep the dropdown list short and the labels scannable.

VariantPurpose
DefaultResting state for a single-choice dropdown with 4+ options.
ErrorValidation has failed — for example, no option selected for a required field.

Design tokens

TokenValueDescription
input/background/default
#ffffff
Trigger background
input/background/disabled
#f5f5f5
Disabled background
input/border/default
#aeaeae
Default border
input/border/focus
#318272
Focus + open border
input/border/error
#bc1700
Error border
menu/item/selected
#eafaf5
Selected option background
menu/item/selected/fg
#207264
Selected option text
radius/sm
4px
Corner radius

Guidelines

Do
  • Use a meaningful placeholder like "Select a category"
  • Sort options logically (alphabetical or most-used first)
  • Pre-select a sensible default when one exists
  • Use for 4+ options — use Radio for 2–3
  • Keep option labels short and scannable
Don't
  • Use "Choose one…" as a placeholder for required fields
  • Use a Select for fewer than 4 options
  • Nest options more than one level deep
  • Disable the Select without explaining why
  • Use a Select for actions — use a Menu or Button
TextareaCheckbox