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 into your FastStore project
To apply the styles of this component in your FastStore project, import the following into your stylesheet:
@import '@faststore/ui/src/components/molecules/SearchInputField/styles.scss';Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
<SearchInputField onSubmit={() => {}} />Props
| 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. |
Design Tokens
| 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 |
Nested Elements
Button
| 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) |
Input
| 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) |
Customization
For further customization, you can use the following data attributes:
data-fs-search-input-field
data-fs-search-input-field-input