Spryker

Search

Search input and results panel for product discovery. Combines a text input with an optional filter control and a type-ahead results dropdown.

Variants

Two layouts cover primary navigation search and compact filter toolbars.

VariantPurpose
FullDefault in the main site header. Full-width input with embedded search button.
CompactFixed 240px width for filter toolbars, side panels, and inline filtering.

Design tokens

TokenValueDescription
input/background/default
#ffffff
Input background
input/background/disabled
#f5f5f5
Disabled background
input/border/default
#aeaeae
Default border
input/border/focus
#318272
Focus border
input/text/value
#3b3b3d
Entered value
input/text/placeholder
#5a5b5c
Placeholder text
button/secondary/bg
#f5f5f5
Embedded search button background
radius/sm
4px
Corner radius

Guidelines

Do
  • Use the full placeholder: "Search by product, SKU, or part number…"
  • Show results as the user types — aim for sub-200ms
  • Group results by section label (Products, Categories…)
  • Include a "View all results" footer link in the dropdown
  • Use MD in primary navigation; SM or inline in filter toolbars
Don't
  • Add a separate search button outside the input field
  • Show more than 6–8 results in the dropdown
  • Clear the input when the user closes the dropdown
  • Use vague empty states — always suggest a next step
  • Use the inline size in the main navigation bar
TabsTooltip