The SearchBar component is the main entry point for search querying. It provides the input box where the user types their query.
Default Styling
Here is the default styling for a search bar:
Configuration
"componentSettings": {
"SearchBar": {
"placeholderText": "Search", // The placeholder text in the answers search bar
"allowEmptySearch": true, // Allows users to submit an empty search in the searchbar
"loadingIndicator": { // Optional, options for loading indicator on seachbar
"display": false, // Optional, whether to include a loading indicator on seachbar
"iconUrl": "", // Optional, use custom icon url instead of the default loading indicator animation
"submitIcon": "iconName", // Optional, used to specify a different built-in icon for the submit button. Defaults to Animated Magnifying glass when CSS is included.
},
"voiceSearch": {
"enabled": false, // Whether or not voice search is enabled
"customMicIconUrl": "", // Path to override the voice start icon
"customListeningIconUrl": "" // Path to override the voice stop icon
}
}