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.Example
Code
Usage
Import the component
_10import { SearchInput } from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/organisms/SearchInput/styles.scss";
For details, see Importing FastStore UI component styles.
Design tokens
Local token | Default value/Global token linked |
---|---|
--fs-search-input-height-desktop | var(--fs-spacing-6) |
Data attributes
You can target and override
SearchInput
styles using the following data attributes:
data-fs-search-input
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. |