Input
ion-input,ion-textarea
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
ngAfterContentInit()
ngControl
Input Properties
Attr | Type | Details |
---|---|---|
autocomplete | string |
Set the input's autocomplete property. Values: |
autocorrect | string |
Set the input's autocorrect property. Values: |
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 |
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: |
Sass Variables
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 |