Search Input
Receives, searches, and displays suggestions.
The
SearchInput is responsible for receiving, searching, and displaying suggestions. This component is part of the Search feature.Import
Import the component from @faststore/ui
_10import { SearchInput } 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/organisms/SearchInput/styles.scss';
Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
Example
Code
Props
| 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. |
Design Tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-search-input-height-desktop | var(--fs-spacing-6) |
Customization
data-fs-search-input