Search Input
Responsible to receive, search and display suggestions.
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
_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