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
color string

The predefined color to use. For example: "primary", "secondary", "danger".

mode string

The mode to apply to this component. Mode can be ios, wp, or md.

cancelButtonText string

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

showCancelButton boolean

Whether to show the cancel button or not. Default: "false".

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".

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".

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".

animated boolean

Configures if the searchbar is animated or no. By default, animation is false.

value string

Set the input value.

Output Events

Attr Details
ionInput

When the Searchbar input has changed including cleared.

ionBlur

When the Searchbar input has blurred.

ionFocus

When the Searchbar input has focused.

ionCancel

When the cancel button is clicked.

ionClear

When the clear input button is clicked.

Sass Variables

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