Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

Searchbar

ion-searchbar

Improve this doc

Manages the display of a Searchbar which can be used to search or filter items.

Usage

<ion-searchbar
  [(ngModel)]="myInput"
  [showCancelButton]="shouldShowCancel"
  (ionInput)="onInput($event)"
  (ionCancel)="onCancel($event)">
</ion-searchbar>

Instance Members

positionPlaceholder()

setFocus()

Input Properties

Attr Type Details
animated boolean

If true, enable searchbar animation.
autocomplete string

Set the input's autocomplete property. Values: "on", "off". Default "off".
autocorrect string

Set the input's autocorrect property. Values: "on", "off". Default "off".
cancelButtonText string

Set the the cancel button text. Default: "Cancel".
color string

The color to use from your Sass $colors map. Default options are: "primary", "secondary", "danger", "light", and "dark". For more information, see Theming your App.
debounce number

How long, in milliseconds, to wait to trigger the ionInput event after each keystroke. Default 250.
mode string

The mode determines which platform styles to use. Possible values are: "ios", "md", or "wp". For more information, see Platform Styles.
placeholder string

Set the input's placeholder. Default "Search".
showCancelButton boolean

If true, show the cancel button.
spellcheck string|boolean

Set the input's spellcheck property. Values: true, false. Default false.
type string

Set the type of the input. Values: "text", "password", "email", "number", "search", "tel", "url". Default "search".
value string

Set the input value.

Output Events

Attr Details
ionBlur

Emitted when the Searchbar input has blurred.
ionCancel

Emitted when the cancel button is clicked.
ionClear

Emitted when the clear input button is clicked.
ionFocus

Emitted when the Searchbar input has focused.
ionInput

Emitted when the Searchbar input has changed, including when it's cleared.

Sass Variables

iOS Material Design Windows Platform
Property Default Description
$searchbar-ios-padding-vertical 0

Padding top/bottom of the searchbar
$searchbar-ios-padding-horizontal 8px

Padding left/right of the searchbar
$searchbar-ios-background-color rgba(0, 0, 0, .2)

Background of the searchbar
$searchbar-ios-border-color rgba(0, 0, 0, .05)

Border color of the searchbar
$searchbar-ios-min-height 44px

Minimum height of the searchbar
$searchbar-ios-input-search-icon-color rgba(0, 0, 0, .5)

Color of the searchbar input search icon
$searchbar-ios-input-search-icon-svg "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='fg-color' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='fg-color' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>"

Svg for the searchbar input search icon
$searchbar-ios-input-search-icon-size 13px

Size of the searchbar input search icon
$searchbar-ios-input-height 3rem

Height of the searchbar input
$searchbar-ios-input-placeholder-color rgba(0, 0, 0, .5)

Color of the searchbar input placeholder
$searchbar-ios-input-text-color #000

Color of the searchbar input text
$searchbar-ios-input-background-color #fff

Background of the searchbar input
$searchbar-ios-input-transition all 300ms ease

Transition of the searchbar input
$searchbar-ios-cancel-transition all 300ms ease

Transition of the searchbar input cancel button
$searchbar-ios-input-clear-icon-color rgba(0, 0, 0, .5)

Color of the searchbar input clear icon
$searchbar-ios-input-clear-icon-svg "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='fg-color' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>"

Svg for the searchbar input clear icon
$searchbar-ios-input-clear-icon-size 18px

Size of the searchbar input clear icon
$searchbar-ios-toolbar-input-background rgba(0, 0, 0, .08)

Background of the searchbar input inside of a toolbar
Property Default Description
$searchbar-md-padding 8px

Padding of the searchbar
$searchbar-md-background-color inherit

Background of the searchbar
$searchbar-md-input-search-icon-color #5b5b5b

Color of the searchbar input search icon
$searchbar-md-input-search-icon-svg "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-md-input-search-icon-color + "' d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>"

Svg for the searchbar input search icon
$searchbar-md-input-search-icon-size 20px

Size of the searchbar input search icon
$searchbar-md-input-height auto

Height of the searchbar input
$searchbar-md-input-line-height 3rem

Line height of the searchbar input
$searchbar-md-input-box-shadow 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)

Box shadow of the searchbar input
$searchbar-md-input-placeholder-color #aeaeae

Color of the searchbar input placeholder
$searchbar-md-input-text-color #141414

Color of the searchbar input text
$searchbar-md-input-background-color #fff

Background of the searchbar input
$searchbar-md-input-border-radius 2px

Border radius of the searchbar input
$searchbar-md-input-clear-icon-color #5b5b5b

Color of the searchbar input clear icon
$searchbar-md-input-clear-icon-svg "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $searchbar-md-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>"

Svg for the searchbar input clear icon
$searchbar-md-input-clear-icon-size 22px

Size of the searchbar input clear icon
Property Default Description
$searchbar-wp-padding 8px

Padding of the searchbar
$searchbar-wp-background-color transparent

Background of the searchbar
$searchbar-wp-border-width 2px

Border width of the searchbar
$searchbar-wp-border-color $input-wp-border-color

Border color of the searchbar
$searchbar-wp-border-color-focused color($colors-wp, primary)

Border color of the searchbar on focus
$searchbar-wp-input-search-icon-color #858585

Color of the searchbar input search icon
$searchbar-wp-input-search-icon-svg "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-wp-input-search-icon-color + "' d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>"

Svg for the searchbar input search icon
$searchbar-wp-input-search-icon-size 20px

Size of the searchbar input search icon
$searchbar-wp-input-padding-vertical 0

Padding top/bottom of the searchbar input
$searchbar-wp-input-padding-horizontal 8px

Padding left/right of the searchbar input
$searchbar-wp-input-height auto

Height of the searchbar input
$searchbar-wp-input-line-height 3rem

Line height of the searchbar input
$searchbar-wp-input-placeholder-color #858585

Color of the searchbar input placeholder
$searchbar-wp-input-text-color #141414

Color of the searchbar input text
$searchbar-wp-input-background-color #fff

Background of the searchbar input
$searchbar-wp-input-border-radius 0

Border radius of the searchbar input
$searchbar-wp-input-font-size 1.4rem

Font size of the searchbar input
$searchbar-wp-input-font-weight 400

Font weight of the searchbar input
$searchbar-wp-input-clear-icon-color #858585

Color of the searchbar input clear icon
$searchbar-wp-input-clear-icon-svg "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $searchbar-wp-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>"

Svg for the searchbar input clear icon
$searchbar-wp-input-clear-icon-size 22px

Size of the searchbar input clear icon

Related

Searchbar Component Docs

API

Native

General