Input

`ion-input,ion-textarea`

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

`ngControl`

Input Properties

Attr	Type	Details
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.
disabled	`boolean`	If true, the user cannot interact with this element.
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.
mode	`string`	The mode determines which platform styles to use. Possible values are: `"ios"`, `"md"`, or `"wp"`. For more information, see Platform Styles.
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"`.
value	`string`	The text value of the input.

Output Events

Attr	Details
blur	Emitted when the input no longer has focus.
focus	Emitted 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
`$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-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