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'

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

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

Follow the instructions in the Importing FastStore UI component styles tutorial.

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-search-input`
visibleDropdown	`false \| true`	The current status of the Search Dropdown.
term*	`string`	Term to be researched.
isLoading	`false \| true`	Enables a loading state.
terms*	`{ value: string; }[]`	List of Suggestion terms.
products*	`{}[]`	List of Suggested products.
onSearchSelection	`(term: string, path: string) => void`	Callback function when a search term is selected.

Local token	Default value/Global token linked
`--fs-search-input-height-desktop`	`var(--fs-spacing-6)`

data-fs-search-input