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 better able to handle the user experience and interactivity.

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

Along with the blur/focus events, input support all standard text input events like keyup, keydown, keypress, input,etc. Any standard event can be attached and will function as expected.

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

ngAfterContentInit()

ngControl

Input Properties

Attr Type Details
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".
clearInput boolean

If true, a clear icon will appear in the input when there is a value. Clicking it clears the input.
clearOnEdit boolean

If true, the value will be cleared after focus upon edit. Defaults to true when type is "password", false for all other types.
max any

The maximum value, which must not be less than its minimum (min attribute) value.
min any

The minimum value, which must not be greater than its maximum (max attribute) value.
placeholder string

Instructional text that shows before the input has a value.
readonly boolean

If true, the user cannot modify the value.
step any

Works with the min and max attributes to limit the increments at which a value can be set.
type string

The type of control to display. The default type is text. Possible values are: "text", "password", "email", "number", "search", "tel", or "url".

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
$text-input-placeholder-color #999

Color of the input placeholder
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-end $text-input-ios-margin-right

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

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

Margin start 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-end $text-input-md-margin-right

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

Margin bottom of the input
$text-input-md-margin-start $text-input-md-margin-left

Margin start 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-end $text-input-wp-margin-right

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

Margin bottom of the input
$text-input-wp-margin-start $text-input-wp-margin-left

Margin start 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