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.

Component

selector: ion-input

Usage

<ion-item>
  <ion-label>Username</ion-label>
  <ion-input></ion-input>
</ion-item>

<ion-item>
  <ion-label fixed>Website</ion-label>
  <ion-input type="url"></ion-input>
</ion-item>

<ion-item>
  <ion-label floating>Email</ion-label>
  <ion-input type="email"></ion-input>
</ion-item>

<ion-item>
  <ion-label stacked>Phone</ion-label>
  <ion-input type="tel"></ion-input>
</ion-item>

<ion-item>
  <ion-input placeholder="Username" clearInput></ion-input>
</ion-item>

Attributes: