Skip to main content
Version: v6

ion-input

scoped

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

Label Positioning

Labels will take up the width of their content by default. This positioning can be changed to be a fixed width, stacked, or floating label.

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 when it is inside of an item. The fill property on the item can be set to either "solid" or "outline".

Helper & Error Text

Helper & error text can be used inside of an item with an input by slotting a note in the "helper" and "error" slots. The error slot will not be displayed unless the ion-invalid class is added to the ion-item. 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.

Item Counter

The item counter is helper 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.

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.

Theming

Colors

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.

Interfaces

InputChangeEventDetail

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

InputCustomEvent

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;
}

Properties

accept (deprecated)

Descriptionこの属性は無視されます。 Deprecated
Attributeaccept
Typestring | undefined
Defaultundefined

autocapitalize

DescriptionIndicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: "off", "none", "on", "sentences", "words", "characters".
Attributeautocapitalize
Typestring
Default'off'

autocomplete

Descriptionコントロールの値が、ブラウザによって自動的に補完されるかどうかを示します。
Attributeautocomplete
Type"name" | "email" | "tel" | "url" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo"
Default'off'

autocorrect

Descriptionユーザーがテキスト値を入力/編集する際に、自動補正を有効にするかどうか。
Attributeautocorrect
Type"off" | "on"
Default'off'

autofocus

Descriptionこの Boolean 属性により、ページロード時にフォームコントロールにInputフォーカスが当たるように指定することができます。
Attributeautofocus
Typeboolean
Defaultfalse

clearInput

Descriptiontrueの場合、値があるときにInputにクリアアイコンが表示されます。これをクリックすると、入力がクリアされます。
Attributeclear-input
Typeboolean
Defaultfalse

clearOnEdit

Descriptiontrueの場合、編集時にフォーカスされた後、値がクリアされる。デフォルトは type"password" のとき true で、それ以外のときは false です。
Attributeclear-on-edit
Typeboolean | undefined
Defaultundefined

color

DescriptionThe color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Defaultundefined

debounce

Descriptionキーを押すたびに ionChange イベントが発生するまでの待ち時間をミリ秒単位で設定します。これは ngModelv-model などのフォームバインディングにも影響します。
Attributedebounce
Typenumber
Default0

disabled

Descriptiontrueの場合、ユーザはInputと対話することができません。
Attributedisabled
Typeboolean
Defaultfalse

enterkeyhint

DescriptionA hint to the browser for which enter key to display. Possible values: "enter", "done", "go", "next", "previous", "search", and "send".
Attributeenterkeyhint
Type"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined
Defaultundefined

inputmode

DescriptionA hint to the browser for which keyboard to display. Possible values: "none", "text", "tel", "url", "email", "numeric", "decimal", and "search".
Attributeinputmode
Type"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined
Defaultundefined

max

Description最大値で、その最小値(min属性)より小さくてはなりません。
Attributemax
Typenumber | string | undefined
Defaultundefined

maxlength

Descriptiontype属性の値が text, email, search, password, tel, または url の場合、この属性はユーザーが入力できる最大文字数を指定します。
Attributemaxlength
Typenumber | undefined
Defaultundefined

min

Description最小値で、その最大値(max属性)より大きくてはなりません。
Attributemin
Typenumber | string | undefined
Defaultundefined

minlength

Descriptiontype属性の値が text, email, search, password, tel, または url の場合、この属性はユーザーが入力できる最小文字数を指定します。
Attributeminlength
Typenumber | undefined
Defaultundefined

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" | "md"
Defaultundefined

multiple

Descriptiontrueの場合、ユーザは複数の値を入力することができる。この属性は、type属性が "email" に設定されている場合に適用され、それ以外の場合は無視される。
Attributemultiple
Typeboolean | undefined
Defaultundefined

name

Descriptionフォームデータとともに送信されるコントロールの名前。
Attributename
Typestring
Defaultthis.inputId

pattern

Description値をチェックするための正規表現。パターンは、部分的なものだけでなく、値全体にマッチする必要があります。title 属性を使って、ユーザーを助けるためにパターンを説明します。この属性は、type属性の値が "text", "search", "tel", "url", "email", "date", または "password" であるときに適用され、それ以外のときは無視されます。type 属性が "date" の場合、pattern"date" Inputタイプをネイティブにサポートしないブラウザでのみ使用されます。詳しくは https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date を参照してください。
Attributepattern
Typestring | undefined
Defaultundefined

placeholder

DescriptionInstructional text that shows before the input has a value. This property applies only when the type property is set to "email", "number", "password", "search", "tel", "text", or "url", otherwise it is ignored.
Attributeplaceholder
Typestring | undefined
Defaultundefined

readonly

Descriptiontrueの場合、ユーザーは値を変更することができません。
Attributereadonly
Typeboolean
Defaultfalse

required

Descriptiontrueの場合、ユーザーはフォームを送信する前に値を入力する必要があります。
Attributerequired
Typeboolean
Defaultfalse

size

Descriptionコントロールの初期サイズ。ただし、type属性の値が "text" または "password" である場合は、整数値の文字数です。この属性は、type属性が "text", "search", "tel", "url", "email", または "password" に設定されている場合にのみ適用され、それ以外の場合は無視されます。
Attributesize
Typenumber | undefined
Defaultundefined

spellcheck

Descriptiontrueの場合、その要素のスペルチェックと文法チェックが行われる。
Attributespellcheck
Typeboolean
Defaultfalse

step

DescriptionWorks with the min and max attributes to limit the increments at which a value can be set. Possible values are: "any" or a positive floating point number.
Attributestep
Typestring | undefined
Defaultundefined

type

Description表示するコントロールの種類を指定します。デフォルトのタイプはテキストです。
Attributetype
Type"date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "tel" | "text" | "time" | "url" | "week"
Default'text'

value

Description入力された値です。
Attributevalue
Typenull | number | string | undefined
Default''

Events

NameDescription
ionBlurInputのフォーカスが外れたときに発行されます。
ionChange値が変更されたときに発行されます。
ionFocusInputにフォーカスが当たったときに発行されます。
ionInputキーボード入力が発生したときに発行されます。

Methods

getInputElement

Description要素の内部で使用されているネイティブの <input> 要素を返します。
SignaturegetInputElement() => Promise<HTMLInputElement>

setFocus

DescriptionSets focus on the native input in ion-input. Use this method instead of the global input.focus().

Developers who wish to focus an input when a page enters should call setFocus() in the ionViewDidEnter() lifecycle method.
SignaturesetFocus() => Promise<void>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

NameDescription
--backgroundInputの背景
--colorInputのテキストの色
--padding-bottomInputのBottom Padding
--padding-end入力の方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。
--padding-start入力の方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。
--padding-topInputのTop Padding
--placeholder-colorInputのPlaceholderテキストの色
--placeholder-font-styleInputのPlaceholderテキストのFont Style
--placeholder-font-weightInputのPlaceholderテキストのFont Weight
--placeholder-opacityInputのPlaceholderテキストの不透明度

Slots

No slots available for this component.