SearchInputField

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


_10import { SearchInputField } from '@faststore/ui'

To apply the styles of this component in your FastStore project, import the following into your stylesheet:


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

Follow the instructions in the Importing FastStore UI component styles tutorial.


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

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-search-input`
buttonProps	`ButtonProps`	Props for the submit button inside the input.
buttonIcon	`string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	A React component that will be rendered as an icon (submit button).	`<Icon name="MagnifyingGlass" />`
aria-label	`string`	Custom aria-label for input and button.
onSubmit*	`(value: string) => void`	Callback function when submitted.

Local token	Default value/Global token linked
`--fs-search-input-field-height-mobile`	`var(--fs-control-tap-size)`
`--fs-search-input-field-height-desktop`	`var(--fs-spacing-6)`

`--fs-search-input-field-transition-timing`	`var(--fs-transition-timing)`
`--fs-search-input-field-transition-function`	`ease`

Local token	Default value/Global token linked
`--fs-search-input-field-button-min-height`	`var(--fs-search-input-height-desktop)`

`--fs-search-input-field-button-padding-top-desktop`	`var(--fs-spacing-0)`
`--fs-search-input-field-button-padding-bottom-desktop`	`var(--fs-search-input-field-button-padding-top-desktop)`

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

For further customization, you can use the following data attributes:

data-fs-search-input-field

data-fs-search-input-field-input