import Props from '@ionic-internal/component-api/v8/input/props.md'; import Events from '@ionic-internal/component-api/v8/input/events.md'; import Methods from '@ionic-internal/component-api/v8/input/methods.md'; import Parts from '@ionic-internal/component-api/v8/input/parts.md'; import CustomProps from '@ionic-internal/component-api/v8/input/custom-props.mdx'; import Slots from '@ionic-internal/component-api/v8/input/slots.md';

import EncapsulationPill from '@components/page/api/EncapsulationPill';

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 and integrates with the keyboard on mobile devices.

import Basic from '@site/static/usage/v8/input/basic/index.md';

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".

import Types from '@site/static/usage/v8/input/types/index.md';

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 labels
• label slot: used for custom HTML labels (experimental)
• aria-label: used to provide a label for screen readers but adds no visible label

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.

import LabelPlacement from '@site/static/usage/v8/input/label-placement/index.md';

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.

import LabelSlot from '@site/static/usage/v8/input/label-slot/index.md';

If no visible label is needed, developers should still supply an aria-label so the input is accessible to screen readers.

import NoVisibleLabel from '@site/static/usage/v8/input/no-visible-label/index.md';

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.

import Clear from '@site/static/usage/v8/input/clear/index.md';

Material Design offers filled styles for an input. The fill property on the input can be set to either "solid" or "outline".

Filled inputs can be used on iOS by setting the input's mode to md.

:::warning Inputs that use fill should not be used in an ion-item due to styling conflicts between the components. :::

import Fill from '@site/static/usage/v8/input/fill/index.md';

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.

import HelperError from '@site/static/usage/v8/input/helper-error/index.md';

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.

import Counter from '@site/static/usage/v8/input/counter/index.md';

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.

import CounterAlignment from '@site/static/usage/v8/input/counter-alignment/index.md';

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.

import FilteringData from '@site/static/usage/v8/input/filtering/index.md';

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}

import Masking from '@site/static/usage/v8/input/mask/index.md';

:::note

Please submit bug reports with Maskito to the Maskito Github repository. For technical support, please use the Ionic Forum or Ionic Discord.

:::

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.

:::note 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. :::

import StartEndSlots from '@site/static/usage/v8/input/start-end-slots/index.md';

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.

:::note The color property does not change the text color of the input. For that, use the --color CSS property. :::

import Colors from '@site/static/usage/v8/input/theming/colors/index.md';

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.

import CSSProps from '@site/static/usage/v8/input/theming/css-properties/index.md';

interface InputChangeEventDetail {
  value: string | undefined | null;
}

While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

interface InputCustomEvent extends CustomEvent {
  detail: InputChangeEventDetail;
  target: HTMLIonInputElement;
}