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
placeholderString!Placeholder to be used on the input-
emptyPlaceholderString!Shows a placeholder when the ResultList hasn't results to displayed-
compactModeBooleanIdentify when to use the compact version of the component-
hasIconLeftBooleanIdentify if the search icon is on left or right position-
autoFocusBooleanIdentify if the search input should autofocus or not-
maxWidthNumber | StringMax width of the search bar-
customSearchPageUrlstringTemplate for a custom url. It can have a substring ${term} used as placeholder to interpolate the searched term. (e.g. /search?query=${term})-
~iconClasses~StringDEPRECATED ~Custom classes for the search icon~ Use the CSS handle searchBarIcon.-
minSearchTermLengthNumberIf defined, it will block searches where the term length is lesser than minSearchTermLength.-
autocompleteAlignmentHorizontalAlignmentAutocomplete Horizontal alignment.left
openAutocompleteOnFocusBooleanIdentify if autocomplete should be open on input focus or not.false
blurOnSubmitBooleanIdentify if input should blur on submit.false
autocompleteFullWidthBooleanIf true, the autocomplete will fill the whole window horizontally.false
submitOnIconClickBooleanIdentify if search icon should submit on click.false

HorizontalAlignment

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

CSS Handles

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

Class nameDescriptionComponent Source
searchBarContainerThe main container of SearchBarSearchBar
compactModeProperties to be applied to the input when compactMode prop is trueAutocompleteInput
paddingInputThe padding of the SearchBar inputAutocompleteInput
searchBarIconThe class that targets the search bar iconAutocompleteInput