🎉 We are thrilled to introduce FastStore v2. If you are looking for documentation of the previous version of FastStore, please refer to FastStore v1.

Search Input

The SearchInput is responsible to receive, search and display suggestions. This component is part of the Search feature.

Import

Import the component from @faststore/ui

import { SearchInput } from '@faststore/ui'

Import Styles

import '@faststore/ui/src/components/organisms/SearchInput/styles.scss'

Usage


Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-search-input
visibleDropdownfalse | trueThe current status of the Search Dropdown.
term*stringTerm to be researched.
isLoadingfalse | trueEnables a loading state.
terms*{ value: string; }[]List of Suggestion terms.
products*{}[]List of Suggested products.
onSearchSelection(term: string, path: string) => voidCallback function when a search term is selected.

Design Tokens

Local tokenDefault value/Global token linked
--fs-search-input-height-desktopvar(--fs-spacing-6)

Customization

data-fs-search-input