UI Components
Organisms
Search Input

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

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