This page is about version 3.119.6 of the app, which is not the most recent version. The latest stable version is 3.178.1.

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.

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

• Usage
  • Props
  • CSS Handles

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.

Prop name	Type	Description	Default value
attemptPageTypeSearch	Boolean	If 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
autocompleteAlignment	HorizontalAlignment	Autocomplete Horizontal alignment.	left
autocompleteFullWidth	Boolean	If true, the autocomplete will fill the whole window horizontally.	false
autoFocus	Boolean	Identify if the search input should autofocus or not	-
blurOnSubmit	Boolean	Identify if input should blur on submit.	false
compactMode	Boolean	Identify when to use the compact version of the component	-
customSearchPageUrl	string	Template for a custom url. It can have a substring ${term} used as placeholder to interpolate the searched term. (e.g. /search?query=${term})	-
displayMode	DisplayMode	Define the component display mode,such as which buttons should be visible	clear-button
emptyPlaceholder	String!	Shows a placeholder when the ResultList hasn't results to displayed	-
hasIconLeft	Boolean	Identify if the search icon is on left or right position	-
maxWidth	Number | String	Max width of the search bar	-
minSearchTermLength	Number	If defined, it will block searches where the term length is lesser than minSearchTermLength.	-
openAutocompleteOnFocus	Boolean	Identify if autocomplete should be open on input focus or not.	false
placeholder	String!	Placeholder to be used on the input	-
iconClasses	String	Custom classes for the search icon Use the CSS handle searchBarIcon.	-
submitOnIconClick	Boolean	- Identify if search icon should submit on click. Use the displayMode prop instead.	false

Enum name	Enum value	Empty state	Filled state
clear-button	'clear-button'
search-and-clear-buttons	'search-and-clear-buttons'
search-button	'search-button'

Enum name	Enum value
center	'center'
left	'left'
right	'right'

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

Class name	Description	Component Source
compactMode	Properties to be applied to the input when compactMode prop is true	AutocompleteInput
externalSearchButtonWrapper	Targets the external search bar icon wrapper	AutocompleteInput
paddingInput	The padding of the SearchBar input	AutocompleteInput
searchBarContainer	The main container of SearchBar	SearchBar
searchBarIcon--clear	Targets the search bar clear icon	AutocompleteInput
searchBarIcon--external-search	Targets the search bar external search icon	AutocompleteInput
searchBarIcon--prefix	Targets the search bar prefix icon icon	AutocompleteInput
searchBarIcon--search	Targets the search bar search icon	AutocompleteInput
searchBarIcon	Targets the search bar icon	AutocompleteInput
suffixWrapper	Targets the wrapper for all the input sufixes wrapper	AutocompleteInput