Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreUI componentsOrganisms
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

_10
import { 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

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-search-input
visibleDropdownfalse | trueThe current status of the Search Dropdown.
term*stringTerm to be researched.
isLoadingfalse | trueEnables a loading state.
terms*{ value: string; }[]List of Suggestion terms.
products*{}[]List of Suggested products.
onSearchSelection(term: string, path: string) => voidCallback function when a search term is selected.

Design Tokens

Local tokenDefault value/Global token linked
--fs-search-input-height-desktopvar(--fs-spacing-6)

Customization

data-fs-search-input
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
On this page