SearchDropdown

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

1 min read

Source code

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...

History

Top Search

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`