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.-

CSS Handles

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

Class nameDescriptionComponent Source
searchBarContainerThe main container of SearchBarSearchBar
resultsListThe list containing the results of the searchResultsList
resultsItemImageThe image from a product returned by the searchResultsList
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