Search input and results panel for product discovery. Combines a text input with an optional filter control and a type-ahead results dropdown.
The Search component combines a text input with an optional filter control and a type-ahead results panel. It handles product discovery across the full catalogue.
Two sizes to fit different layout contexts. Use sm (36px) in compact toolbars or headers; use md (40px) as the default in the main navigation bar.
Small — 36px
Medium — 40px
Four interaction states: default (idle), focused (active input with teal border), filled (has a value and shows clear button), and disabled.
Default
Focused
Filled
Disabled
Enable hasFilter to show a Filters button between the text input and the search button. This opens a filter panel (not part of this component) for narrowing results by category, price, or brand.
When a query is entered, a dropdown results panel appears below the input. Results are grouped by section label and include a 'View all results' footer link.
When no results match the query, the results panel shows a helpful empty state message. Suggest alternative actions to help the user continue their journey.
Try typing into the search input below to see the live results panel. This demonstrates the full flow: empty → typing → results dropdown.
① Container
Full-width, 1.5px border, radius-8, height 36–40px
② Search icon
Leading 16×16 icon; teal when focused
③ Text input
Flex-grow, placeholder text, 13px
④ Filter pill
Optional — tune icon + "Filters" label, left separator
⑤ Search button
Teal bg, right-radius only, icon + label
All input states rendered together. The focused state shifts the border to teal and changes the leading icon colour. The disabled state uses a grey background and prevents interaction.
Default — idle input waiting for user interaction
Focused — active, teal border and icon
Filled — has value, clear button visible
Disabled — non-interactive, reduced opacity
| Token | Value | Description |
|---|---|---|
background/surface | #ffffff | Panel and input background |
background/brand/primary | #318272 | Search button fill |
text/primary | #3b3b3d | Input text |
text/placeholder | #656565 | Placeholder text |
text/brand | #207264 | Focused icon + "View all" link |
text/inverse | #ffffff | Search button icon and label |
border/default | #cccccc | Default input border |
radius/md | 8px | Input and results panel corner radius |
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "md" | Height of the search input. sm=36px, md=40px. |
state | "default" | "focused" | "filled" | "disabled" | "default" | Visual state of the input — controls border colour, icon colour, and clear button visibility. |
hasFilter | boolean | false | Show a Filters pill button between the input and the search button. |
placeholder | string | "Search…" | Placeholder text shown when the input is empty. |
value | string | "" | Current input value. Controls whether the clear button is shown. |
onSearch | () => void | — | Callback fired when the search button is clicked or Enter is pressed. |
onClear | () => void | — | Callback fired when the clear (×) button is clicked. |
Do
Don't
