Search Auto Complete
List of auto completing suggestions based on searched term. This component is part of the Search feature.
Import
Import the component from @faststore/ui
import { SearchAutoComplete, SearchAutoCompleteTerm } from '@faststore/ui'Import Styles
import '@faststore/ui/src/components/molecules/SearchAutoComplete/styles.scss'Usage
Props
Search Auto Complete
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-search-auto-complete |
Search Auto Complete Term
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-search-auto-complete-term |
| linkProps | Partial<LinkProps<LinkElementType>> | Props for the link from term component. | |
| icon | string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | A React component that will be rendered as an icon. | <Icon name="MagnifyingGlass" width={18} height={18} /> |
| term* | string | Term researched. | |
| suggestion* | string | Suggestion proposed with auto complete. |
Design Tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-search-auto-complete-padding-top | var(--fs-spacing-2) |
--fs-search-auto-complete-padding-right | var(--fs-spacing-3) |
--fs-search-auto-complete-padding-bottom | var(--fs-search-auto-complete-padding-top) |
--fs-search-auto-complete-padding-left | var(--fs-search-auto-complete-padding-right) |
--fs-search-auto-complete-transition-property | var(--fs-transition-property) |
--fs-search-auto-complete-transition-function | var(--fs-transition-function) |
--fs-search-auto-complete-transition-timing | var(--fs-transition-timing) |
Nested Elements
Item
| Local token | Default value/Global token linked |
|---|---|
--fs-search-auto-complete-item-column-gap | var(--fs-spacing-1) |
--fs-search-auto-complete-item-text-size | var(--fs-text-size-2) |
--fs-search-auto-complete-item-line-height | 1.25 |
--fs-search-auto-complete-item-bkg-color-hover | var(--fs-color-tertiary-bkg-hover) |
Icon
| Local token | Default value/Global token linked |
|---|---|
--fs-search-auto-complete-item-icon-color | var(--fs-color-neutral-4) |
--fs-search-auto-complete-item-icon-size | 1.125rem |
Variants
Other Icons
Customization
For further customization, you can use the following data attributes:
data-fs-search-auto-complete
data-fs-search-auto-complete-item
data-fs-search-auto-complete-item-link
data-fs-search-auto-complete-item-icon