Search Dropdown
Combine SearchHistory, SearchTop, SearchAutoComplete and SearchProducts to show all options in SearchInput. This component is part of the Search feature.
Overview
Import
Import the component from @faststore/ui
import { SearchDropdown } from '@faststore/ui'Import Styles into your FastStore project
To apply the styles of this component in your FastStore project, import the following into your stylesheet:
@import '@faststore/ui/src/components/molecules/SearchDropdown/styles.scss';Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
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 |
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) |
Customization
For further customization, you can use the following data attributes:
data-fs-search-dropdown
data-fs-search-dropdown-loading-text