SearchInputField

Responsible to receive, search and display suggestions.

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

Example

Code

Usage


_10import { SearchInputField } from "@faststore/ui";

To apply styles, include the following in your stylesheet:


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

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)`

You can target and override SearchInputField styles using the following data attributes:

data-fs-search-input-field

data-fs-search-input-field-input

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.