ion-input
The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML input, but works great on desktop devices and integrates with the keyboard on mobile devices.
Basic Usage
Types
The input component is meant for text type inputs only, such as "text"
, "password"
, "email"
, "number"
, "search"
, "tel"
, and "url"
. It supports all standard text input events including keyup
, keydown
, keypress
, and more. The default type
is "text"
.
Labels
Labels should be used to describe the input. They can be used visually, and they will also be read out by screen readers when the user is focused on the input. This makes it easy for the user to understand the intent of the input. Input has several ways to assign a label:
label
property: used for plaintext labelslabel
slot: used for custom HTML labels (experimental)aria-label
: used to provide a label for screen readers but adds no visible label
Label Placement
Labels will take up the width of their content by default. Developers can use the labelPlacement
property to control how the label is placed relative to the control.
Label Slot (experimental)
While plaintext labels should be passed in via the label
property, if custom HTML is needed, it can be passed through the label
slot instead.
Note that this feature is considered experimental because it relies on a simulated version of Web Component slots. As a result, the simulated behavior may not exactly match the native slot behavior.
No Visible Label
If no visible label is needed, developers should still supply an aria-label
so the input is accessible to screen readers.
Clear Options
Inputs offer two options for clearing the input based on how you interact with it. The first way is by adding the clearInput
property which will show a clear button when the input has a value
. The second way is the clearOnEdit
property which will clear the input after it has been blurred and then typed in again. Inputs with a type
set to "password"
will have clearOnEdit
enabled by default.
Filled Inputs
Material Design offers filled styles for an input. The fill
property on the input can be set to either "solid"
or "outline"
.
Since the fill
styles visually defines the input container, inputs that use fill
should not be used in ion-item
.
Filled inputs can be used on iOS by setting Input's mode
to md
.
Helper & Error Text
Helper and error text can be used inside of an input with the helperText
and errorText
property. The error text will not be displayed unless the ion-invalid
and ion-touched
classes are added to the ion-input
. This ensures errors are not shown before the user has a chance to enter data.
In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation.
Input Counter
The input counter is text that displays under an input to notify the user of how many characters have been entered out of the total that the input will accept. When adding counter, the default behavior is to format the value that gets displayed as inputLength
/ maxLength
. This behavior can be customized by passing in a formatter function to the counterFormatter
property.
The counter
and counterFormatter
properties on ion-item
were deprecated in Ionic 7 and should be used directly on ion-input
instead.
Inputs with a counter add a border between the input and the counter, therefore they should not be placed inside of an ion-item
which adds an additional border under the item. The ion-padding-start
class can be added to align the counter inputs with inputs inside of items.
Filtering User Input
Developers can use the ionInput
event to update the input value in response to user input such as a keypress
. This is useful for filtering out invalid or unwanted characters.
When storing the value in a state variable, we recommend updating both the state variable and the ion-input
component value. This ensures that the state variable and the ion-input
component value remain in sync.
Input Masking
Input masks are expressions that constrain input to support valid input values. Ionic recommends using Maskito for input masking. Maskito is a lightweight, dependency-free library for masking input fields. It supports a wide range of masks, including phone numbers, credit cards, dates, and more.
To get started with Maskito, install the library:
npm install @maskito/core @maskito/{angular,react,vue}
Please submit bug reports with Maskito to the Maskito Github repository. For technical support, please use the Ionic Forum or Ionic Discord.
Start and End Slots (experimental)
The start
and end
slots can be used to place icons, buttons, or prefix/suffix text on either side of the input.
Note that this feature is considered experimental because it relies on a simulated version of Web Component slots. As a result, the simulated behavior may not exactly match the native slot behavior.
In most cases, Icon components placed in these slots should have aria-hidden="true"
. See the Icon accessibility docs for more information.
If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a Button. This ensures that the content can be tabbed to.
Theming
Colors
Setting the color
property changes the color palette for each input. On ios
mode, this property changes the caret color. On md
mode, this property changes the caret color and the highlight/underline color.
The color
property does not change the text color of the input. For that, use the --color
CSS property.
CSS Custom Properties
Input uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a higher specificity selector. Targeting the ion-input
for customization will not work; therefore we recommend adding a class and customizing it that way.
Migrating from Legacy Input Syntax
A simpler input syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an input, resolves accessibility issues, and improves the developer experience.
Developers can perform this migration one input at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
Using the Modern Syntax
Using the modern syntax involves three steps:
- Remove
ion-label
and use thelabel
property onion-input
instead. The placement of the label can be configured using thelabelPlacement
property onion-input
. - Move input-specific properties from
ion-item
on toion-input
. This includes thecounter
,counterFormatter
,fill
, andshape
properties. - Remove usages of the
helper
anderror
slots onion-item
and use thehelperText
anderrorText
properties onion-input
instead.
- JavaScript
- Angular
- React
- Vue
<!-- Label and Label Position -->
<!-- Before -->
<ion-item>
<ion-label position="floating">Email:</ion-label>
<ion-input></ion-input>
</ion-item>
<!-- After -->
<ion-item>
<ion-input label="Email:" label-placement="floating"></ion-input>
</ion-item>
<!-- Fill -->
<!-- Before -->
<ion-item fill="outline" shape="round">
<ion-label position="floating">Email:</ion-label>
<ion-input></ion-input>
</ion-item>
<!-- After -->
<!-- Inputs using `fill` should not be placed in ion-item -->
<ion-input fill="outline" shape="round" label="Email:" label-placement="floating"></ion-input>
<!-- Input-specific features on ion-item -->
<!-- Before -->
<ion-item counter="true">
<ion-label position="floating">Email:</ion-label>
<ion-input maxlength="100"></ion-input>
<div slot="helper">Enter an email</div>
<div slot="error">Please enter a valid email</div>
</ion-item>
<!-- After -->
<!--
Metadata such as counters and helper text should not
be used when an input is in an item/list. If you need to
provide more context on a input, consider using an ion-note
underneath the ion-list.
-->
<ion-input
label="Email:"
counter="true"
maxlength="100"
helper-text="Enter an email"
error-text="Please enter a valid email"
></ion-input>
<!-- Label and Label Position -->
<!-- Before -->
<ion-item>
<ion-label position="floating">Email:</ion-label>
<ion-input></ion-input>
</ion-item>
<!-- After -->
<ion-item>
<ion-input label="Email:" labelPlacement="floating"></ion-input>
</ion-item>
<!-- Fill -->
<!-- Before -->
<ion-item fill="outline" shape="round">
<ion-label position="floating">Email:</ion-label>
<ion-input></ion-input>
</ion-item>
<!-- After -->
<!-- Inputs using `fill` should not be placed in ion-item -->
<ion-input fill="outline" shape="round" label="Email:" labelPlacement="floating"></ion-input>
<!-- Input-specific features on ion-item -->
<!-- Before -->
<ion-item [counter]="true">
<ion-label position="floating">Email:</ion-label>
<ion-input maxlength="100"></ion-input>
<div slot="helper">Enter an email</div>
<div slot="error">Please enter a valid email</div>
</ion-item>
<!-- After -->
<!--
Metadata such as counters and helper text should not
be used when an input is in an item/list. If you need to
provide more context on a input, consider using an ion-note
underneath the ion-list.
-->
<ion-input
label="Email:"
[counter]="true"
maxlength="100"
helperText="Enter an email"
errorText="Please enter a valid email"
></ion-input>
{/* Label and Label Position */}
{/* Before */}
<IonItem>
<IonLabel position="floating">Email:</IonLabel>
<IonInput></IonInput>
</IonItem>
{/* After */}
<IonItem>
<IonInput label="Email:" labelPlacement="floating"></IonInput>
</IonItem>
{/* Fill */}
{/* Before */}
<IonItem fill="outline" shape="round">
<IonLabel position="floating">Email:</IonLabel>
<IonInput></IonInput>
</IonItem>
{/* After */}
{/* Inputs using `fill` should not be placed in IonItem */}
<IonInput fill="outline" shape="round" label="Email:" labelPlacement="floating"></IonInput>
{/* Input-specific features on IonItem */}
{/* Before */}
<IonItem counter={true}>
<IonLabel position="floating">Email:</IonLabel>
<IonInput maxlength="100"></IonInput>
<div slot="helper">Enter an email</div>
<div slot="error">Please enter a valid email</div>
</IonItem>
{/* After */}
{/*
Metadata such as counters and helper text should not
be used when an input is in an item/list. If you need to
provide more context on a input, consider using an IonNote
underneath the IonList.
*/}
<IonInput
label="Email:"
counter={true}
maxlength="100"
helperText="Enter an email"
errorText="Please enter a valid email"
></IonInput>