Search Input

Receives, searches, and displays suggestions.

1 min read

The SearchInput is responsible for receiving, searching, and displaying suggestions. This component is part of the Search feature.

Example

Code

Usage


_10import { SearchInput } from "@faststore/ui";

To apply styles, include the following in your stylesheet:


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

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

You can target and override SearchInput styles using the following data attributes: data-fs-search-input

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.