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
Waiting for input...
Searching for:
Appl
Usage
Import the component
_10import { SearchDropdown } from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10import "@faststore/ui/src/components/molecules/SearchDropdown/styles.scss";
Design tokens
Local token | Default value/Global token linked |
---|---|
--fs-search-dropdown-bkg-color | var(--fs-color-neutral-0) |
--fs-search-dropdown-box-shadow | var(--fs-shadow) |
--fs-search-dropdown-width-mobile | 100vw |
--fs-search-dropdown-width-desktop | 100% |
--fs-search-dropdown-border-width | var(--fs-border-width) |
--fs-search-dropdown-border-color | var(--fs-border-color) |
--fs-search-dropdown-border-radius | 0 0 var(--fs-border-radius) var(--fs-border-radius) |
--fs-search-dropdown-position-left-mobile | calc(-1 * var(--fs-control-tap-size)) |
--fs-search-dropdown-position-left-tablet | calc(var(--fs-search-dropdown-position-left-mobile) - var(--fs-spacing-1)) |
--fs-search-dropdown-position-top-mobile | calc(var(--fs-search-dropdown-position-top-tablet) + 1px) |
--fs-search-dropdown-position-top-tablet | calc(var(--fs-control-tap-size) + var(--fs-border-width)) |
--fs-search-dropdown-position-top-desktop | var(--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
Name | Type | Description | Default |
---|---|---|---|
testId | string | ID to find this component in testing tools (e.g.: cypress, testing-library, and jest). | fs-search-dropdown |