Search Bar

Description

Search Bar is a VTEX Component that shows a search bar with autocomplete options and displays the matching products as well. This component can be imported and used by any VTEX App.

📢 Disclaimer: Don't fork this project; use, contribute, or open issue with your feature request.

Table of Contents

Usage

You should follow the usage instruction in the main README.

Then, add search-bar block into your app theme, as we do in our Store Header.

Props

Prop nameTypeDescriptionDefault value
attemptPageTypeSearchBooleanIf true when clicked on result link of brand, department or category will link to the corresponding brand, department or category page. When false will always go to a full text search page.false
autocompleteAlignmentHorizontalAlignmentAutocomplete Horizontal alignment.left
autocompleteFullWidthBooleanIf true, the autocomplete will fill the whole window horizontally.false
autoFocusBooleanIdentify if the search input should autofocus or not-
blurOnSubmitBooleanIdentify if input should blur on submit.false
compactModeBooleanIdentify when to use the compact version of the component-
customSearchPageUrlstringTemplate for a custom url. It can have a substring ${term} used as placeholder to interpolate the searched term. (e.g. /search?query=${term})-
displayModeDisplayModeDefine the component display mode,such as which buttons should be visibleclear-button
emptyPlaceholderString!Shows a placeholder when the ResultList hasn't results to displayed-
hasIconLeftBooleanIdentify if the search icon is on left or right position-
maxWidthNumber | StringMax width of the search bar-
minSearchTermLengthNumberIf defined, it will block searches where the term length is lesser than minSearchTermLength.-
openAutocompleteOnFocusBooleanIdentify if autocomplete should be open on input focus or not.false
placeholderString!Placeholder to be used on the input-
~iconClasses~String
DEPRECATED
~Custom classes for the search icon~ Use the CSS handle searchBarIcon.
-
~submitOnIconClick~Boolean
DEPRECATED
- ~Identify if search icon should submit on click.~ Use the displayMode prop instead.
false

DisplayMode

Enum nameEnum valueEmpty stateFilled state
clear-button'clear-button'
clear-button-empty
clear-button-filled
search-and-clear-buttons'search-and-clear-buttons'
search-button-empty
search-button-filled
search-button'search-button'
search-and-clear-buttons-empty
search-and-clear-buttons-filled

HorizontalAlignment

Enum nameEnum value
center'center'
left'left'
right'right'

CSS Handles

Below, we describe the namespace that are defined in the SearchBar.

Class nameDescriptionComponent Source
compactModeProperties to be applied to the input when compactMode prop is trueAutocompleteInput
externalSearchButtonWrapperTargets the external search bar icon wrapperAutocompleteInput
paddingInputThe padding of the SearchBar inputAutocompleteInput
searchBarContainerThe main container of SearchBarSearchBar
searchBarIcon--clearTargets the search bar clear iconAutocompleteInput
searchBarIcon--external-searchTargets the search bar external search iconAutocompleteInput
searchBarIcon--prefixTargets the search bar prefix icon iconAutocompleteInput
searchBarIcon--searchTargets the search bar search iconAutocompleteInput
searchBarIconTargets the search bar iconAutocompleteInput
suffixWrapperTargets the wrapper for all the input sufixes wrapperAutocompleteInput