Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

Input

ion-input,ion-textarea

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 color="primary">Inline Label</ion-label>
    <ion-input placeholder="Text Input"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label color="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 color="primary" stacked>Stacked Label</ion-label>
    <ion-input type="email" placeholder="Email Input"></ion-input>
  </ion-item>

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

  <ion-item>
    <ion-label color="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-item>
    <ion-textarea placeholder="Enter a description"></ion-textarea>
  </ion-item>
</ion-list>

Instance Members

ngControl

Input Properties

Attr Type Details
placeholder string

The placeholder for the input
clearInput boolean

A clear icon will appear in the input when there is a value. Clicking it clears the input.
value string

The text value of the input
type string

The HTML input type (text, password, email, number, search, tel, or url)
disabled boolean

If the input should be disabled or not
readonly boolean

If the input should be readonly or not
mode string

The mode to apply to this component.
clearOnEdit boolean

whether to clear the input upon editing or not

Output Events

Attr Details
blur

Expression to call when the input no longer has focus
focus

Expression to call when the input has focus

Sass Variables

All iOS Material Design Windows Platform
Property Default Description
$text-input-highlight-color-valid #32db64

Color of the input highlight when valid
$text-input-highlight-color-invalid #f53d3d

Color of the input highlight when invalid
Property Default Description
$text-input-ios-background-color $list-ios-background-color

Background color of the input
$text-input-ios-margin-top $item-ios-padding-top

Margin top of the input
$text-input-ios-margin-right ($item-ios-padding-right / 2)

Margin right of the input
$text-input-ios-margin-bottom $item-ios-padding-bottom

Margin bottom of the input
$text-input-ios-margin-left 0

Margin left of the input
$text-input-ios-input-clear-icon-width 30px

Width of the icon used to clear the input
$text-input-ios-input-clear-icon-color rgba(0, 0, 0, .5)

Color of the icon used to clear the input
$text-input-ios-input-clear-icon-svg "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $text-input-ios-input-clear-icon-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>"

Icon used to clear the input
$text-input-ios-input-clear-icon-size 18px

Size of the icon used to clear the input
$text-input-ios-show-focus-highlight false

Show the focus highlight when the input has focus
$text-input-ios-show-valid-highlight $text-input-ios-show-focus-highlight

Show the valid highlight when it is valid and has a value
$text-input-ios-show-invalid-highlight $text-input-ios-show-focus-highlight

Show the invalid highlight when it is invalid and has value
$text-input-ios-highlight-color color($colors-ios, primary)

Color of the input highlight
$text-input-ios-highlight-color-valid $text-input-highlight-color-valid

Color of the input highlight when valid
$text-input-ios-highlight-color-invalid $text-input-highlight-color-invalid

Color of the input highlight when invalid
Property Default Description
$text-input-md-background-color $list-md-background-color

Background color of the input
$text-input-md-margin-top $item-md-padding-top

Margin top of the input
$text-input-md-margin-right ($item-md-padding-right / 2)

Margin right of the input
$text-input-md-margin-bottom $item-md-padding-bottom

Margin bottom of the input
$text-input-md-margin-left ($item-md-padding-left / 2)

Margin left of the input
$text-input-md-input-clear-icon-width 30px

Width of the icon used to clear the input
$text-input-md-input-clear-icon-color #5b5b5b

Color of the icon used to clear the input
$text-input-md-input-clear-icon-svg "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $text-input-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>"

Icon used to clear the input
$text-input-md-input-clear-icon-size 22px

Size of the icon used to clear the input
$text-input-md-show-focus-highlight true

Show the focus highlight when the input has focus
$text-input-md-show-valid-highlight $text-input-md-show-focus-highlight

Show the valid highlight when it is valid and has a value
$text-input-md-show-invalid-highlight $text-input-md-show-focus-highlight

Show the invalid highlight when it is invalid and has value
$text-input-md-highlight-color color($colors-md, primary)

Color of the input highlight
$text-input-md-highlight-color-valid $text-input-highlight-color-valid

Color of the input highlight when valid
$text-input-md-highlight-color-invalid $text-input-highlight-color-invalid

Color of the input highlight when invalid
Property Default Description
$text-input-wp-background-color $list-wp-background-color

Background color of the input
$text-input-wp-border-color $input-wp-border-color

Border color of the input
$text-input-wp-border-width 2px

Border width of the input
$text-input-wp-margin-top $item-wp-padding-top

Margin top of the input
$text-input-wp-margin-right ($item-wp-padding-right / 2)

Margin right of the input
$text-input-wp-margin-bottom $item-wp-padding-bottom

Margin bottom of the input
$text-input-wp-margin-left ($item-wp-padding-left / 2)

Margin left of the input
$text-input-wp-padding-vertical 0

Vertical padding of the input
$text-input-wp-padding-horizontal 8px

Horizontal padding of the input
$text-input-wp-line-height 3rem

Line height of the input
$text-input-wp-input-clear-icon-width 30px

Width of the icon used to clear the input
$text-input-wp-input-clear-icon-color $input-wp-border-color

Color of the icon used to clear the input
$text-input-wp-input-clear-icon-svg "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $text-input-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>"

Icon used to clear the input
$text-input-wp-input-clear-icon-size 22px

Size of the icon used to clear the input
$text-input-wp-show-focus-highlight true

Show the focus highlight when the input has focus
$text-input-wp-show-valid-highlight $text-input-wp-show-focus-highlight

Show the valid highlight when it is valid and has a value
$text-input-wp-show-invalid-highlight $text-input-wp-show-focus-highlight

Show the invalid highlight when it is invalid and has value
$text-input-wp-highlight-color color($colors-wp, primary)

Color of the input highlight
$text-input-wp-highlight-color-valid $text-input-highlight-color-valid

Color of the input highlight when valid
$text-input-wp-highlight-color-invalid $text-input-highlight-color-invalid

Color of the input highlight when invalid

API

Native

General