Input

ion-input

Improve this doc

ion-input is meant for text type inputs only, such as text, password, email, number, search, tel, and url. Ionic still uses an actual <input type="text"> HTML element within the component, however, with Ionic wrapping the native HTML input element it's able to better handle the user experience and interactivity.

Similarily, <ion-textarea> should be used in place of <textarea>.

An ion-input is not used for non-text type inputs, such as a checkbox, radio, toggle, range, select, etc.

Usage

<ion-list>
  <ion-item>
    <ion-label primary>Inline Label</ion-label>
    <ion-input placeholder="Text Input"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label primary fixed>Fixed Label</ion-label>
    <ion-input type="tel" placeholder="Tel Input"></ion-input>
  </ion-item>

  <ion-item>
    <ion-input type="number" placeholder="Number Input with no label"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label primary stacked>Stacked Label</ion-label>
    <ion-input type="email" placeholder="Email Input"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label primary stacked>Stacked Label</ion-label>
    <ion-input type="password" placeholder="Password Input"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label primary floating>Floating Label</ion-label>
    <ion-input></ion-input>
  </ion-item>

  <ion-item>
    <ion-input placeholder="Clear Input" clearInput></ion-input>
  </ion-item>
</ion-list>

Attributes: