Documentation
Feedback
Guides
Storefront Development

Storefront Development
Storefront development
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


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


Design tokens

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

Data attributes

You can target and override SearchInput styles using the following data attributes: data-fs-search-input

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.
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
On this page