A Searchbar 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 click.

Properties

Property	Attribute	Description	Type
`animated`	`animated`	If `true`, enable searchbar animation. Defaults to `false`.	`boolean`
`autocomplete`	`autocomplete`	Set the input's autocomplete property. Default `"off"`.	`"off" \| "on"`
`autocorrect`	`autocorrect`	Set the input's autocorrect property. Default `"off"`.	`"off" \| "on"`
`cancelButtonIcon`	`cancel-button-icon`	Set the cancel button icon. Only applies to `md` mode. Defaults to `"md-arrow-back"`.	`string`
`cancelButtonText`	`cancel-button-text`	Set the the cancel button text. Only applies to `ios` mode. Default: `"Cancel"`.	`string`
`clearIcon`	`clear-icon`	Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`.	`string \| undefined`
`color`	`color`	The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see theming.	`string \| undefined`
`debounce`	`debounce`	Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `250`.	`number`
`mode`	`mode`	The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.	`"ios" \| "md"`
`placeholder`	`placeholder`	Set the input's placeholder. Default `"Search"`.	`string`
`searchIcon`	`search-icon`	The icon to use as the search icon. Defaults to `"search"`.	`string \| undefined`
`showCancelButton`	`show-cancel-button`	If `true`, show the cancel button. Defaults to `false`.	`boolean`
`spellcheck`	`spellcheck`	If `true`, enable spellcheck on the input. Defaults to `false`.	`boolean`
`type`	`type`	Set the type of the input. Values: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"`. Default `"search"`.	`string`
`value`	`value`	the value of the searchbar.	`null \| string \| undefined`

Events

Event	Detail	Description
`ionBlur`		Emitted when the input loses focus.
`ionCancel`		Emitted when the cancel button is clicked.
`ionChange`	TextInputChangeEvent	Emitted when the value has changed.
`ionClear`		Emitted when the clear input button is clicked.
`ionFocus`		Emitted when the input has focus.
`ionInput`	KeyboardEvent	Emitted when a keyboard input ocurred.

Methods

`setFocus() => void`

Sets focus on the specified ion-searchbar. Use this method instead of the global input.focus().

Returns

Type: void

CSS Custom Properties

Name	Description
`--background`	Background of the searchbar
`--cancel-button-color`	Color of the searchbar cancel button
`--clear-button-color`	Color of the searchbar clear button
`--color`	Color of the searchbar text
`--icon-color`	Color of the searchbar icon
`--placeholder-color`	Color of the searchbar placeholder
`--placeholder-font-style`	Font style of the searchbar placeholder
`--placeholder-font-weight`	Font weight of the searchbar placeholder
`--placeholder-opacity`	Opacity of the searchbar placeholder

Built with StencilJS