Skip to main content
Version: v6

ion-searchbar

scoped

Searchbars represent a text field that can be used to search through a collection. They can be displayed inside of a toolbar or the main content. A searchbar should be used instead of an input to search lists.

Basic Usage

Search Icon

A search icon is displayed to the left of the input field in a searchbar. It can be customized to any Ionicon.

Clear Button

A clear button is displayed when a searchbar has a value or 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. By default, the clear button is set to show when focusing the searchbar, but it can be set to always show or never show. The icon inside of the clear button can also be customized to any Ionicon.

Cancel Button

A cancel button can be enabled which will clear the input and lose the focus upon click. By default, cancel buttons are set to never show, but they can be set to always show or only show when focusing the searchbar. The cancel button is displayed as text in ios mode, and as an icon in md mode. Both the text and icon can be customized using different properties, with the icon accepting any Ionicon.

Searchbars in Toolbars

Searchbars are styled to look native when placed inside of a toolbar. In iOS, searchbars should be placed in their own toolbar, under a toolbar that contains the page title. In Material Design, searchbars are either persistently displayed in their own toolbar, or expand over a toolbar containing the page title.

Debounce

A debounce can be set on the searchbar in order to delay triggering the ionChange event. This is useful when querying data, as it can be used to wait to make a request instead of requesting the data each time a character is entered in the input.

Theming

Colors

CSS Custom Properties

Searchbar uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a higher specificity selector. Targeting the ion-searchbar for customization will not work, therefore we recommend adding a class and customizing it that way.

Keyboard Display

Android

By default, tapping the input will cause the keyboard to appear with a magnifying glass icon on the submit button. You can optionally set the inputmode property to "search", which will change the icon from a magnifying glass to a carriage return.

iOS

By default, tapping the input will cause the keyboard to appear with the text "return" on a gray submit button. You can optionally set the inputmode property to "search", which will change the text from "return" to "go", and change the button color from gray to blue. Alternatively, you can wrap the ion-searchbar in a form element with an action property. This will cause the keyboard to appear with a blue submit button that says "search".

Interfaces

SearchbarChangeEventDetail

interface SearchbarChangeEventDetail {
value?: string;
}

SearchbarCustomEvent

While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

interface SearchbarCustomEvent extends CustomEvent {
detail: SearchbarChangeEventDetail;
target: HTMLIonSearchbarElement;
}

Properties

animated

Descriptiontrueの場合、検索バーのアニメーションを有効にします。
Attributeanimated
Typeboolean
Defaultfalse

autocomplete

DescriptionInputのオートコンプリートプロパティを設定します。
Attributeautocomplete
Type"name" | "email" | "tel" | "url" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo"
Default'off'

autocorrect

DescriptionInputのオートコレクトプロパティを設定します。
Attributeautocorrect
Type"off" | "on"
Default'off'

cancelButtonIcon

DescriptionSet the cancel button icon. Only applies to md mode. Defaults to arrow-back-sharp.
Attributecancel-button-icon
Typestring
Defaultconfig.get('backButtonIcon', arrowBackSharp) as string

cancelButtonText

Descriptionキャンセルボタンのテキストを設定します。 ios modeのみ適用されます。
Attributecancel-button-text
Typestring
Default'Cancel'

clearIcon

Descriptionクリアアイコンを設定します。デフォルトは ios の場合は close-circlemd の場合は close-sharp です。
Attributeclear-icon
Typestring | undefined
Defaultundefined

color

DescriptionThe 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.
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Defaultundefined

debounce

Descriptionキーを押すたびに ionChange イベントが発生するまでの待ち時間をミリ秒単位で設定します。これは ngModelv-model などのフォームバインディングにも影響します。
Attributedebounce
Typenumber
Default250

disabled

Descriptiontrueの場合、ユーザはInputと対話することができません。
Attributedisabled
Typeboolean
Defaultfalse

enterkeyhint

DescriptionA hint to the browser for which enter key to display. Possible values: "enter", "done", "go", "next", "previous", "search", and "send".
Attributeenterkeyhint
Type"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined
Defaultundefined

inputmode

DescriptionA hint to the browser for which keyboard to display. Possible values: "none", "text", "tel", "url", "email", "numeric", "decimal", and "search".
Attributeinputmode
Type"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined
Defaultundefined

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" | "md"
Defaultundefined

placeholder

DescriptionSet the input's placeholder. placeholder can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example <Ionic> would become &lt;Ionic&gt;

For more information: Security Documentation
Attributeplaceholder
Typestring
Default'Search'

searchIcon

DescriptionThe icon to use as the search icon. Defaults to search-outline in ios mode and search-sharp in md mode.
Attributesearch-icon
Typestring | undefined
Defaultundefined

showCancelButton

DescriptionSets the behavior for the cancel button. Defaults to "never". Setting to "focus" shows the cancel button on focus. Setting to "never" hides the cancel button. Setting to "always" shows the cancel button regardless of focus state.
Attributeshow-cancel-button
Type"always" | "focus" | "never"
Default'never'

showClearButton

DescriptionSets the behavior for the clear button. Defaults to "focus". Setting to "focus" shows the clear button on focus if the input is not empty. Setting to "never" hides the clear button. Setting to "always" shows the clear button regardless of focus state, but only if the input is not empty.
Attributeshow-clear-button
Type"always" | "focus" | "never"
Default'always'

spellcheck

Descriptiontrueの場合、入力値のスペルチェックを有効にします。
Attributespellcheck
Typeboolean
Defaultfalse

type

DescriptionInputの種類を設定します。
Attributetype
Type"email" | "number" | "password" | "search" | "tel" | "text" | "url"
Default'search'

value

Description検索バーの値。
Attributevalue
Typenull | string | undefined
Default''

Events

NameDescription
ionBlurInputのフォーカスが外れたときに発行されます。
ionCancelキャンセルボタンがクリックされたときに発行されます。
ionChange値が変更されたときに発行されます。
ionClearClear Inputボタンがクリックされたときに発行されます。
ionFocusInputにフォーカスが当たったときに発行されます。
ionInputキーボード入力が発生したときに発行されます。

Methods

getInputElement

Description要素の内部で使用されているネイティブの <input> 要素を返します。
SignaturegetInputElement() => Promise<HTMLInputElement>

setFocus

DescriptionSets focus on the specified ion-searchbar. Use this method instead of the global input.focus().
SignaturesetFocus() => Promise<void>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

NameDescription
--background検索バーのInputの背景
--border-radius検索バーのInputのボーダー半径
--box-shadow検索バーのInputのボックスシャドウ
--cancel-button-color検索バーのキャンセルボタンの色
--clear-button-color検索バーのクリアボタンの色
--color検索バーのテキストの色
--icon-color検索バーのアイコンの色
--placeholder-color検索バーのPlaceholderの色
--placeholder-font-style検索バーのPlaceholderのFont Style
--placeholder-font-weight検索バーのPlaceholderのFont Weight
--placeholder-opacity検索バーのPlaceholderの不透明度

Slots

No slots available for this component.