Search Input Field

An InputField with a search button. This component is part of the Search feature.

Import

Import the component from @faststore/ui

import { SearchInputField } from '@faststore/ui'

Import Styles

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

<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>> \| ReactFragment \| 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-width`	`var(--fs-spacing-7)`
`--fs-search-input-field-button-min-height`	`var(--fs-search-input-height-desktop)`
`--fs-search-input-field-button-bkg-color`	`transparent`

`--fs-search-input-field-button-height-mobile`	`var(--fs-search-input-field-button-width)`
`--fs-search-input-field-button-height-desktop`	`var(--fs-search-input-field-height-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)`

Local token	Default value/Global token linked
`--fs-search-input-field-icon-width`	`var(--fs-spacing-4)`
`--fs-search-input-field-icon-height`	`var(--fs-search-input-field-icon-width)`

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

data-fs-search-input-field

data-fs-search-input-field-input