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-dropdowndata-fs-search-dropdown-loading-textProps
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing-library, and jest). | fs-search-dropdown |