Skip to content

Latest commit

 

History

History
45 lines (32 loc) · 4.29 KB

SearchBar.md

File metadata and controls

45 lines (32 loc) · 4.29 KB

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 name Type Description Default value
placeholder String! Placeholder to be used on the input -
emptyPlaceholder String! Shows a placeholder when the ResultList hasn't results to displayed -
compactMode Boolean Identify when to use the compact version of the component -
hasIconLeft Boolean Identify if the search icon is on left or right position -
autoFocus Boolean Identify if the search input should autofocus or not -
maxWidth Number | String Max width of the search bar -
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}) -
iconClasses String DEPRECATED 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 name Description Component Source
searchBarContainer The main container of SearchBar SearchBar
resultsList The list containing the results of the search ResultsList
resultsItemImage The image from a product returned by the search ResultsList
compactMode Properties to be applied to the input when compactMode prop is true AutocompleteInput
paddingInput The padding of the SearchBar input AutocompleteInput
searchBarIcon The class that targets the search bar icon AutocompleteInput