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'
Import Styles
import '@faststore/ui/src/components/organisms/SearchInput/styles.scss'
Usage
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