Documentation
Feedback
Guides
Storefront Development

Storefront Development
Search Input Field

Responsible to receive, search and display suggestions.

An InputField with a search button. This component is part of the Search feature.## Import
Import the component from @faststore/ui

_10
import { SearchInputField } from '@faststore/ui'

Import Styles

_10
import '@faststore/ui/src/components/molecules/SearchInputField/styles.scss'


Usage


_10
<SearchInputField onSubmit={() => {}} />


Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-search-input
buttonPropsButtonPropsProps for the submit button inside the input.
buttonIconstring | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalA React component that will be rendered as an icon (submit button).<Icon name="MagnifyingGlass" />
aria-labelstringCustom aria-label for input and button.
onSubmit*(value: string) => voidCallback function when submitted.

Design Tokens

Local tokenDefault value/Global token linked
--fs-search-input-field-height-mobilevar(--fs-control-tap-size)
--fs-search-input-field-height-desktopvar(--fs-spacing-6)
--fs-search-input-field-transition-timingvar(--fs-transition-timing)
--fs-search-input-field-transition-functionease

Nested Elements

Button

Local tokenDefault value/Global token linked
--fs-search-input-field-button-min-heightvar(--fs-search-input-height-desktop)
--fs-search-input-field-button-padding-top-desktopvar(--fs-spacing-0)
--fs-search-input-field-button-padding-bottom-desktopvar(--fs-search-input-field-button-padding-top-desktop)

Input

Local tokenDefault value/Global token linked
--fs-search-input-field-input-padding-rightvar(--fs-search-input-field-button-width)
--fs-search-input-field-input-bkg-color
var(--fs-color-body-bkg)

Customization

For further customization, you can use the following data attributes:
data-fs-search-input-field
data-fs-search-input-field-input
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page