Documentation
Feedback
Guides
Storefront Development

Storefront Development
Storefront development
SearchDropdown

Combines SearchHistory, SearchTop and SearchAutoComplete and SearchProducts to show all options in SearchInput.

Combine SearchHistory, SearchTop, SearchAutoComplete and SearchProducts to show all options in SearchInput. This component is part of the Search feature.
Example
Code

Usage

Import the component


_10
import { SearchDropdown } from "@faststore/ui";

Import styles

To apply styles, include the following in your stylesheet:

_10
import "@faststore/ui/src/components/molecules/SearchDropdown/styles.scss";


Design tokens

Local tokenDefault value/Global token linked
--fs-search-dropdown-bkg-color
var(--fs-color-neutral-0)
--fs-search-dropdown-box-shadowvar(--fs-shadow)
--fs-search-dropdown-width-mobile100vw
--fs-search-dropdown-width-desktop100%
--fs-search-dropdown-border-widthvar(--fs-border-width)
--fs-search-dropdown-border-colorvar(--fs-border-color)
--fs-search-dropdown-border-radius0 0 var(--fs-border-radius) var(--fs-border-radius)
--fs-search-dropdown-position-left-mobilecalc(-1 * var(--fs-control-tap-size))
--fs-search-dropdown-position-left-tabletcalc(var(--fs-search-dropdown-position-left-mobile) - var(--fs-spacing-1))
--fs-search-dropdown-position-top-mobilecalc(var(--fs-search-dropdown-position-top-tablet) + 1px)
--fs-search-dropdown-position-top-tabletcalc(var(--fs-control-tap-size) + var(--fs-border-width))
--fs-search-dropdown-position-top-desktopvar(--fs-search-input-height-desktop)
--fs-search-dropdown-section-border-color
var(--fs-border-color-light)

Data attributes

You can target and override SearchDropdown styles using the following data attributes:
data-fs-search-dropdown
data-fs-search-dropdown-loading-text

Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing-library, and jest).fs-search-dropdown
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
On this page