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.

Overview

Example

Code

Waiting for input...

History

Top Search

Searching for: Appl

Import

Import the component from @faststore/ui


_10import { 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:


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

Usage

Example

Code

Searching for: Appl

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