Documentation
Feedback
Guides
Storefront Development

Storefront Development
Search Dropdown

Combine 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

Import

Import the component from @faststore/ui

_10
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:

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


Usage

Example
Code
Searching for: Appl

Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing-library, and jest).fs-search-dropdown

Design Tokens

Local tokenDefault value/Global token linked
--fs-search-dropdown-bkg-color
var(--fs-color-neutral-0)
--fs-search-dropdown-box-shadowvar(--fs-shadow)
--fs-search-dropdown-width-mobile100vw
--fs-search-dropdown-width-desktop100%
--fs-search-dropdown-border-widthvar(--fs-border-width)
--fs-search-dropdown-border-colorvar(--fs-border-color)
--fs-search-dropdown-border-radius0 0 var(--fs-border-radius) var(--fs-border-radius)
--fs-search-dropdown-position-left-mobilecalc(-1 * var(--fs-control-tap-size))
--fs-search-dropdown-position-left-tabletcalc(var(--fs-search-dropdown-position-left-mobile) - var(--fs-spacing-1))
--fs-search-dropdown-position-top-mobilecalc(var(--fs-search-dropdown-position-top-tablet) + 1px)
--fs-search-dropdown-position-top-tabletcalc(var(--fs-control-tap-size) + var(--fs-border-width))
--fs-search-dropdown-position-top-desktopvar(--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
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page