Searchbars represent text fields that can be used to search through a collection. They can be displayed inside a toolbar or the main content.

Search should be used instead of an Input to search lists. A clear button is displayed upon entering input in the searchbar's text field. Clicking on the clear button will erase the text field and the input will remain focused. A cancel button can be enabled which will clear the input and lose the focus upon clicking.

Properties

🚧
Important Note!
This document lists the properties that are specific to this particular UI component.
To check for the properties common for most UI components, please check the General components document.

The Search component has the following properties:

Common Properties

Property Name	Property Description
Value	The searchbar value.
Placeholder	Instructional text that shows before the input has a value. The default is set to Search.
Placeholder I18n	If set to True then use the Placeholder property for internationalization.
Search Icon	The icon to be used as the search icon. The default is to search. Click the Default icon button to select the icon.
Custom Search Icon	Select an `.svg` file. This path will be added as the 'src' attribute. Click the Change button to select the uploaded image from Media Manager.
Animated	If set to true, enables the search bar animation. The default is set to false.
Autocomplete	Indicates whether the value of the control can be automatically completed by the browser. The values are On and Off (default).
Autocorrect	Indicate whether auto correction should be enabled when the text value is being entered/edited. The values are On and Off (default).
Enter Key Hint	An input attribute that specifies what action label or icon to present for the enter key on virtual keyboards: Enter, Done, Go, Next, Previous, Search, Send.
Input Mode	An input attribute indicating which type of keyboard to display: None, Decimal, Email, Numeric, Search, Tel, Text, Url.
Spellcheck	If set to true, enables spellcheck on the input. The default is set to false.
Debounce	Indicate for how long, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. The default is set to 250.
Clear Icon	Set the clear icon. The default is to close-circle for iOS and close for MD. Click the Default icon button to select the icon.
Custom Clear Icon	Select an `.svg` file. This path will be added as the 'src' attribute. Click the Change button to select the uploaded image from Media Manager.
Type	Set the input type of control to display. The values are Text, Password, Email, Number, Search (default), Tel, Url.
Is Focus	If set to True, shows the searchbar when it has focus. Works in the visual editor only.
Cancel Button	Set the behavior for the cancel button. Can be boolean (true or false) or string. Icon- sets the cancel button icon. Only applies to theMDmode. The default is set tomd-arrow-back. Click theDefault icon* button to select the icon. Custom Icon- select an`.svg` file. This path will be added as the 'src' attribute. Click the Changebutton to select the uploaded image fromMedia Manager. Text- set the cancel button text. Only applies toiOSmode. The default is set toCancel*. Show- set the behavior for the cancel button:Never(default),Always,Focus*. Cancel Button Text I18n- if set toTruethen use theCancel Button Text** property for internationalization.
(ionBlur)	Emitted when the search is blurred.
(ionChange)	Emitted when the value has changed.
(ionClear)	Emitted when the clear button is clicked.
(ionFocus)	Emitted when the search has focus.
(ionInput)	Emitted when the keyboard input ocurrs.

Styles Properties

Under the Styles tab, searchbars can be styled with several attributes to look like in a specific way:

Property Name	Property Description
Searchbar Color	Set the color of searchbar by selecting from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or using the Color-picker.
Text Color	Select CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.

Visit the Ionic documentation to read more about searchbars.