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. Default false.
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".
debounce number

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

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

If true, show the cancel button. Default false.
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".

Output Events

Attr Details
ionCancel

Emitted when the cancel button is clicked.
ionClear

Emitted when the clear input button is clicked.
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 start/end 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-top 8px

Padding top of the searchbar
$searchbar-md-padding-end $searchbar-md-padding-top

Padding end of the searchbar
$searchbar-md-padding-bottom $searchbar-md-padding-top

Padding bottom of the searchbar
$searchbar-md-padding-start $searchbar-md-padding-end

Padding start 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-top 8px

Padding top of the searchbar
$searchbar-wp-padding-end $searchbar-wp-padding-top

Padding end of the searchbar
$searchbar-wp-padding-bottom $searchbar-wp-padding-top

Padding bottom of the searchbar
$searchbar-wp-padding-start $searchbar-wp-padding-end

Padding start 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 start/end 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