ion-searchbar

Contents

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

Usage 

<!-- Default Searchbar -->
<ion-searchbar></ion-searchbar>

<!-- Searchbar with danger color -->
<ion-searchbar color="danger"></ion-searchbar>

<!-- Searchbar with value -->
<ion-searchbar value="Ionic"></ion-searchbar>

<!-- Searchbar with telephone type -->
<ion-searchbar type="tel"></ion-searchbar>

<!-- Searchbar disabled -->
<ion-searchbar disabled="true"></ion-searchbar>

<!-- Searchbar with a cancel button and custom cancel button text -->
<ion-searchbar showCancelButton cancelButtonText="Custom Cancel"></ion-searchbar>

<!-- Searchbar with a custom debounce -->
<ion-searchbar debounce="500"></ion-searchbar>

<!-- Animated Searchbar -->
<ion-searchbar animated></ion-searchbar>

<!-- Searchbar with a placeholder -->
<ion-searchbar placeholder="Filter Schedules"></ion-searchbar>

<!-- Searchbar in a Toolbar -->
<ion-toolbar>
  <ion-searchbar></ion-searchbar>
</ion-toolbar>
<!-- Default Searchbar -->
<ion-searchbar></ion-searchbar>

<!-- Searchbar with danger color -->
<ion-searchbar color="danger"></ion-searchbar>

<!-- Searchbar with value -->
<ion-searchbar value="Ionic"></ion-searchbar>

<!-- Searchbar with telephone type -->
<ion-searchbar type="tel"></ion-searchbar>

<!-- Searchbar disabled -->
<ion-searchbar disabled="true"></ion-searchbar>

<!-- Searchbar with a cancel button and custom cancel button text -->
<ion-searchbar show-cancel-button cancel-button-text="Custom Cancel"></ion-searchbar>

<!-- Searchbar with a custom debounce -->
<ion-searchbar debounce="500"></ion-searchbar>

<!-- Animated Searchbar -->
<ion-searchbar animated></ion-searchbar>

<!-- Searchbar with a placeholder -->
<ion-searchbar placeholder="Filter Schedules"></ion-searchbar>

<!-- Searchbar in a Toolbar -->
<ion-toolbar>
  <ion-searchbar></ion-searchbar>
</ion-toolbar>
import React from 'react';

import { IonSearchbar, IonToolbar } from '@ionic/react';

const Example: React.SFC<{}> = () => (
  <>
    {/*-- Default Searchbar --*/}
    <IonSearchbar></IonSearchbar>

    {/*-- Searchbar with danger color --*/}
    <IonSearchbar color="danger"></IonSearchbar>

    {/*-- Searchbar with value --*/}
    <IonSearchbar value="Ionic"></IonSearchbar>

    {/*-- Searchbar with telephone type --*/}
    <IonSearchbar type="tel"></IonSearchbar>

    {/*-- Searchbar disabled  --*/}
    <IonSearchbar disabled="true"></IonSearchbar>

    {/*-- Searchbar with a cancel button and custom cancel button text --*/}
    <IonSearchbar showCancelButton cancelButtonText="Custom Cancel"></IonSearchbar>

    {/*-- Searchbar with a custom debounce --*/}
    <IonSearchbar debounce={500}></IonSearchbar>

    {/*-- Animated Searchbar --*/}
    <IonSearchbar animated></IonSearchbar>

    {/*-- Searchbar with a placeholder --*/}
    <IonSearchbar placeholder="Filter Schedules"></IonSearchbar>

    {/*-- Searchbar in a Toolbar --*/}
    <IonToolbar>
      <IonSearchbar></IonSearchbar>
    </IonToolbar>
  </>
);

export default Example;
<template>
  <!-- Default Searchbar -->
  <ion-searchbar></ion-searchbar>

  <!-- Searchbar with danger color -->
  <ion-searchbar color="danger"></ion-searchbar>

  <!-- Searchbar with value -->
  <ion-searchbar value="Ionic"></ion-searchbar>

  <!-- Searchbar with telephone type -->
  <ion-searchbar type="tel"></ion-searchbar>

  <!-- Searchbar disabled -->
  <ion-searchbar disabled="true"></ion-searchbar>

  <!-- Searchbar with a cancel button and custom cancel button text -->
  <ion-searchbar showCancelButton cancelButtonText="Custom Cancel"></ion-searchbar>

  <!-- Searchbar with a custom debounce -->
  <ion-searchbar debounce="500"></ion-searchbar>

  <!-- Animated Searchbar -->
  <ion-searchbar animated></ion-searchbar>

  <!-- Searchbar with a placeholder -->
  <ion-searchbar placeholder="Filter Schedules"></ion-searchbar>

  <!-- Searchbar in a Toolbar -->
  <ion-toolbar>
    <ion-searchbar></ion-searchbar>
  </ion-toolbar>
</template>

Properties

animated

Description

If true, enable searchbar animation.

Attribute animated
Type boolean
Default false

autocomplete

Description

Set the input's autocomplete property.

Attribute autocomplete
Type "off" | "on"
Default 'off'

autocorrect

Description

Set the input's autocorrect property.

Attribute autocorrect
Type "off" | "on"
Default 'off'

cancelButtonIcon

Description

Set the cancel button icon. Only applies to md mode.

Attribute cancel-button-icon
Type string
Default 'md-arrow-back'

cancelButtonText

Description

Set the the cancel button text. Only applies to ios mode.

Attribute cancel-button-text
Type string
Default 'Cancel'

clearIcon

Description

Set the clear icon. Defaults to "close-circle" for ios and "close" for md.

Attribute clear-icon
Type string | undefined

color

Description

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.

Attribute color
Type string | undefined

debounce

Description

Set the amount of time, in milliseconds, to wait to trigger the ionChange event after each keystroke.

Attribute debounce
Type number
Default 250

disabled

Description

If true, the user cannot interact with the input.

Attribute disabled
Type boolean
Default false

mode

Description

The mode determines which platform styles to use.

Attribute mode
Type "ios" | "md"

placeholder

Description

Set 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

Attribute placeholder
Type string
Default 'Search'

searchIcon

Description

The icon to use as the search icon.

Attribute search-icon
Type string
Default 'search'

showCancelButton

Description

If true, show the cancel button.

Attribute show-cancel-button
Type boolean
Default false

spellcheck

Description

If true, enable spellcheck on the input.

Attribute spellcheck
Type boolean
Default false

type

Description

Set the type of the input.

Attribute type
Type "email" | "number" | "password" | "search" | "tel" | "text" | "url"
Default 'search'

value

Description

the value of the searchbar.

Attribute value
Type null | string | undefined
Default ''

Events

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

Methods

getInputElement

Description

Returns the native <input> element used under the hood.

Signature getInputElement() => Promise<HTMLInputElement>

setFocus

Description

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

Signature setFocus() => 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