Version: v8

ion-input

input コンポーネントは、HTML input 要素のラッパーで、カスタムスタイルと追加機能を備えています。HTML入力と同じプロパティのほとんどを受け入れ、モバイルデバイスのキーボードと統合します。

基本的な使い方

Types

input コンポーネントは、"text", "password", "email", "number", "search", "tel", "url" などのテキストタイプの入力のみを対象としています。また、keyup、keydown、keypressなどの標準的なテキスト入力イベントをすべてサポートしています。デフォルトの type は "text" です。

Labels

ラベルは、入力を説明するために使用されるべきです。これらは視覚的に使用することができ、また、ユーザーが入力に集中しているときには、スクリーンリーダーによって読み上げられます。これにより、ユーザーは入力の意図を理解しやすくなる。Inputにはラベルを割り当てる方法がいくつかあります：

labelプロパティ：プレーンテキストのラベルに使用する。
labelスロット: カスタム HTML ラベルに使用する（実験的）。
aria-label: スクリーンリーダー用のラベルとして使用されるが、ラベルは表示されない。

Label Placement

ラベルは、デフォルトでそのコンテンツの幅を占めます。開発者は labelPlacement プロパティを使用して、ラベルがどのように配置されるかを制御することができます。

Label Slot （実験的）

プレーンテキストのラベルは label プロパティを通して渡されるべきですが、カスタム HTML が必要な場合は、代わりに label スロットを通して渡すことができます。

この機能は、Web Component slots のシミュレート版に依存しているため、実験的なものとみなされていることに注意してください。その結果、シミュレートされた動作はネイティブのスロットの動作と完全に一致するとは限りません。

No Visible Label

表示するラベルが必要ない場合でも、開発者は aria-label を指定する必要があります。

Clear Options

Inputsには、入力の操作方法に応じて、Inputをクリアするための2つのオプションがあります。最初の方法は clearInput プロパティを追加することで、Inputに value があるときにクリアボタンを表示します。2つ目の方法は clearOnEdit プロパティで、入力が編集削除された後、再度入力されるとクリアされます。 type が "password" に設定されているInputは、デフォルトで clearOnEdit が有効になっています。

Filled Inputs

Material Design では、Inputに塗りつぶしのスタイルが用意されています。Inputの fill プロパティは "solid" または "outline" のいずれかに設定することができます。

Filled inputs をiOSで使うためには、inputの mode を md に設定する必要があります。

warning

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

Helper & Error Text

ヘルパーテキストとエラーテキストは、helperText と errorText プロパティを使用して入力の内部で使用することができます。エラーテキストは、 ion-invalid クラスと ion-touched クラスが ion-input に追加されていない限り表示されない。これにより、ユーザがデータを入力する前にエラーが表示されることはありません。

Angularでは、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいてクラスを手動で追加する必要があります。

Input Counter

Input Counterは、Inputの下に表示されるテキストで、入力可能な文字数のうち、何文字が入力されたかをユーザーに通知するものです。カウンターを追加する場合、デフォルトの動作は、表示される値を inputLength / maxLength としてフォーマットすることです。この動作は、counterFormatterプロパティにフォーマッタ関数を渡すことでカスタマイズすることができます。

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

開発者は ionInput イベントを使用して、キー入力などのユーザー入力に応答して入力値を更新することができます。これは、無効な文字や不要な文字をフィルタリングするのに便利です。

ステート変数に値を格納する場合、ステート変数と ion-input コンポーネントの値の両方を更新することを推奨します。これにより、状態変数と ion-input コンポーネントの値が確実に同期されます。

入力マスキング

入力マスキングは、有効な入力値をサポートするように入力を制約する式です。Ionicでは、入力マスキングにMaskitoを使うことを推奨しています。Maskitoは、入力フィールドをマスクするための軽量で依存関係のないライブラリです。電話番号、クレジットカード、日付など、幅広いマスクをサポートしています。

Maskitoを使い始めるには、ライブラリをインストールしてください：

npm install @maskito/core @maskito/{angular,react,vue}

note

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)

startスロットと endスロットはInputの両側にアイコン、ボタン、接頭辞/接尾辞テキストを配置するために使用することができます。

この機能は Web Component slots のシミュレート版に依存しているため、実験的なものであることに注意してください。そのため、シミュレートされた動作はネイティブのスロットの動作と完全に一致するとは限りません。

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.

テーマ

配色

colorプロパティを設定すると、各Inputのカラーパレットが変更されます。 iosモードでは、このプロパティはキャレットカラーを変更します。 mdモードでは、このプロパティはキャレットカラーとハイライト/アンダーラインカラーを変更します。

note

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

CSSカスタムプロパティ

Inputはscoped encapsulationを採用しており、実行時に各スタイルに追加のクラスを付加することで、CSSを自動的にスコープ化します。CSSでscopedセレクタを上書きするには、higher specificity セレクタが必要です。そのため、クラスを追加してカスタマイズすることをお勧めします。

Interfaces

InputChangeEventDetail

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

InputCustomEvent

必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。

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

プロパティ

autocapitalize

Description	Indicates 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"`.
Attribute	`autocapitalize`
Type	`string`
Default	`'off'`

autocomplete

Description	コントロールの値が、ブラウザによって自動的に補完されるかどうかを示します。
Attribute	`autocomplete`
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	ユーザーがテキスト値を入力/編集する際に、自動補正を有効にするかどうか。
Attribute	`autocorrect`
Type	`"off" ｜ "on"`
Default	`'off'`

autofocus

Description	Sets the `autofocus` attribute on the native input element. This may not be sufficient for the element to be focused on page load. See managing focus for more information.
Attribute	`autofocus`
Type	`boolean`
Default	`false`

clearInput

Description	`true`の場合、値があるときにInputにクリアアイコンが表示されます。これをクリックすると、入力がクリアされます。
Attribute	`clear-input`
Type	`boolean`
Default	`false`

clearInputIcon

Description	クリアボタンに使用するアイコン。clearInput`が`true` に設定されている場合にのみ適用される。
Attribute	`clear-input-icon`
Type	`string ｜ undefined`
Default	`undefined`

clearOnEdit

Description	`true`の場合、編集時にフォーカスされた後、値がクリアされる。デフォルトは `type` が `"password"` のとき `true` で、それ以外のときは `false` です。
Attribute	`clear-on-edit`
Type	`boolean ｜ undefined`
Default	`undefined`

color

Description	The 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.
Attribute	`color`
Type	`"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined`
Default	`undefined`

counter

Description	`true`の場合、文字カウンタが使用された文字の比率と総文字数制限を表示します。カウンターを正しく計算するために、開発者は `maxlength` プロパティも設定する必要があります。
Attribute	`counter`
Type	`boolean`
Default	`false`

counterFormatter

Description	A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength". See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
Attribute	`counter-formatter`
Type	`((inputLength: number, maxLength: number) => string) ｜ undefined`
Default	`undefined`

debounce

Description	キーを押すたびに `ionInput` イベントが発生するまでの待ち時間をミリ秒単位で設定します。
Attribute	`debounce`
Type	`number ｜ undefined`
Default	`undefined`

disabled

Description	`true`の場合、ユーザはInputと対話することができません。
Attribute	`disabled`
Type	`boolean`
Default	`false`

enterkeyhint

Description	A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
Attribute	`enterkeyhint`
Type	`"done" ｜ "enter" ｜ "go" ｜ "next" ｜ "previous" ｜ "search" ｜ "send" ｜ undefined`
Default	`undefined`

errorText

Description	Inputの下に配置され、エラーが検出されたときに表示されるテキストです。
Attribute	`error-text`
Type	`string ｜ undefined`
Default	`undefined`

fill

Description	The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
Attribute	`fill`
Type	`"outline" ｜ "solid" ｜ undefined`
Default	`undefined`

helperText

Description	Inputの下に配置され、エラーが検出されなかった場合に表示されるテキストです。
Attribute	`helper-text`
Type	`string ｜ undefined`
Default	`undefined`

inputmode

Description	A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
Attribute	`inputmode`
Type	`"decimal" ｜ "email" ｜ "none" ｜ "numeric" ｜ "search" ｜ "tel" ｜ "text" ｜ "url" ｜ undefined`
Default	`undefined`

label

Description	The visible label associated with the input. Use this if you need to render a plaintext label. The `label` property will take priority over the `label` slot if both are used.
Attribute	`label`
Type	`string ｜ undefined`
Default	`undefined`

labelPlacement

Description	Where to place the label relative to the input. `"start"`: The label will appear to the left of the input in LTR and to the right in RTL. `"end"`: The label will appear to the right of the input in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `"stacked"`: The label will appear smaller and above the input regardless even when the input is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
Attribute	`label-placement`
Type	`"end" ｜ "fixed" ｜ "floating" ｜ "stacked" ｜ "start"`
Default	`'start'`

max

Description	最大値で、その最小値（min属性）より小さくてはなりません。
Attribute	`max`
Type	`number ｜ string ｜ undefined`
Default	`undefined`

maxlength

Description	type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最大文字数を指定します。
Attribute	`maxlength`
Type	`number ｜ undefined`
Default	`undefined`

min

Description	最小値で、その最大値（max属性）より大きくてはなりません。 This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attribute	`min`
Type	`number ｜ string ｜ undefined`
Default	`undefined`

minlength

Description	type属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最小文字数を指定します。
Attribute	`minlength`
Type	`number ｜ undefined`
Default	`undefined`

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。 This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attribute	`mode`
Type	`"ios" ｜ "md"`
Default	`undefined`

multiple

Description	`true`の場合、ユーザは複数の値を入力することができる。この属性は、type属性が `"email"` に設定されている場合に適用され、それ以外の場合は無視される。
Attribute	`multiple`
Type	`boolean ｜ undefined`
Default	`undefined`

name

Description	フォームデータとともに送信されるコントロールの名前。
Attribute	`name`
Type	`string`
Default	`this.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 を参照してください。
Attribute	`pattern`
Type	`string ｜ undefined`
Default	`undefined`

placeholder

Description	Instructional 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.
Attribute	`placeholder`
Type	`string ｜ undefined`
Default	`undefined`

readonly

Description	`true`の場合、ユーザーは値を変更することができません。
Attribute	`readonly`
Type	`boolean`
Default	`false`

required

Description	`true`の場合、ユーザーはフォームを送信する前に値を入力する必要があります。
Attribute	`required`
Type	`boolean`
Default	`false`

shape

Description	入力の形状を指定します。"round"の場合、境界線の半径が大きくなります。
Attribute	`shape`
Type	`"round" ｜ undefined`
Default	`undefined`

spellcheck

Description	`true`の場合、その要素のスペルチェックと文法チェックが行われる。
Attribute	`spellcheck`
Type	`boolean`
Default	`false`

step

Description	Works 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.
Attribute	`step`
Type	`string ｜ undefined`
Default	`undefined`

type

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

value

Description	入力された値です。
Attribute	`value`
Type	`null ｜ number ｜ string ｜ undefined`
Default	`''`

イベント

Name	Description	Bubbles
`ionBlur`	Inputのフォーカスが外れたときに発行されます。	`true`
`ionChange`	The `ionChange` event is fired when the user modifies the input's value. Unlike the `ionInput` event, the `ionChange` event is only fired when changes are committed, not as the user types. Depending on the way the users interacts with the element, the `ionChange` event fires at a different moment: - When the user commits the change explicitly (e.g. by selecting a date from a date picker for `<ion-input type="date">`, pressing the "Enter" key, etc.). - When the element loses focus after its value has changed: for elements where the user's interaction is typing. This event will not emit when programmatically setting the `value` property.	`true`
`ionFocus`	Inputにフォーカスが当たったときに発行されます。	`true`
`ionInput`	The `ionInput` event is fired each time the user modifies the input's value. Unlike the `ionChange` event, the `ionInput` event is fired for each alteration to the input's value. This typically happens for each keystroke as the user types. For elements that accept text input (`type=text`, `type=tel`, etc.), the interface is `InputEvent`; for others, the interface is `Event`. If the input is cleared on edit, the type is `null`.	`true`

メソッド

getInputElement

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

setFocus

Description	Sets 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. Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved. See managing focus for more information.
Signature	`setFocus() => Promise<void>`

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

Name	Description
`--background`	Inputの背景
`--border-color`	ヘルパーテキスト、エラーテキスト、カウンターを使用する場合のInput下のボーダーの色
`--border-radius`	入力の半径。fill="outline "を使う場合、半径が大きいと表示が不均一になることがある。
`--border-style`	ヘルパーテキスト、エラーテキスト、カウンターを使用する場合の入力下のボーダーのスタイル
`--border-width`	ヘルパーテキスト、エラーテキスト、カウンターを使用する場合の入力下のボーダーの幅
`--color`	Inputのテキストの色
`--highlight-color-focused`	フォーカスされたときの入力のハイライトの色
`--highlight-color-invalid`	入力が無効な場合のハイライトの色
`--highlight-color-valid`	有効時の入力のハイライトの色
`--highlight-height`	入力のハイライトの高さ。mdモードにのみ適用される。
`--padding-bottom`	InputのBottom Padding
`--padding-end`	入力の方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。
`--padding-start`	入力の方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。
`--padding-top`	InputのTop Padding
`--placeholder-color`	InputのPlaceholderテキストの色
`--placeholder-font-style`	InputのPlaceholderテキストのFont Style
`--placeholder-font-weight`	InputのPlaceholderテキストのFont Weight
`--placeholder-opacity`	InputのPlaceholderテキストの不透明度

Name	Description
`--background`	Inputの背景
`--border-color`	ヘルパーテキスト、エラーテキスト、カウンターを使用する場合のInput下のボーダーの色
`--border-radius`	入力の半径。fill="outline "を使う場合、半径が大きいと表示が不均一になることがある。
`--border-style`	ヘルパーテキスト、エラーテキスト、カウンターを使用する場合の入力下のボーダーのスタイル
`--border-width`	ヘルパーテキスト、エラーテキスト、カウンターを使用する場合の入力下のボーダーの幅
`--color`	Inputのテキストの色
`--highlight-color-focused`	フォーカスされたときの入力のハイライトの色
`--highlight-color-invalid`	入力が無効な場合のハイライトの色
`--highlight-color-valid`	有効時の入力のハイライトの色
`--highlight-height`	入力のハイライトの高さ。mdモードにのみ適用される。
`--padding-bottom`	InputのBottom Padding
`--padding-end`	入力の方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。
`--padding-start`	入力の方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。
`--padding-top`	InputのTop Padding
`--placeholder-color`	InputのPlaceholderテキストの色
`--placeholder-font-style`	InputのPlaceholderテキストのFont Style
`--placeholder-font-weight`	InputのPlaceholderテキストのFont Weight
`--placeholder-opacity`	InputのPlaceholderテキストの不透明度

Slots

Name	Description
`end`	入力の後端に表示する内容。(実験的)
`label`	入力に関連付けるラベルテキスト。labelPlacement`プロパティを使用すると、入力に対してラベルを配置する位置を制御することができる。ラベルをカスタム HTML でレンダリングする必要がある場合に使用します。(EXPERIMENTAL)
`start`	入力の最先端に表示するコンテンツ。(実験的)

基本的な使い方​

Types​

Labels​

Label Placement​

Label Slot （実験的）​

No Visible Label​

Clear Options​

Filled Inputs​

Helper & Error Text​

Input Counter​

Filtering User Input​

入力マスキング​

Start and End Slots (experimental)​

テーマ​

配色​

CSSカスタムプロパティ​

Interfaces​

InputChangeEventDetail​

InputCustomEvent​

プロパティ​

autocapitalize​

autocomplete​

autocorrect​

autofocus​

clearInput​

clearInputIcon​

clearOnEdit​

color​

counter​

counterFormatter​

debounce​

disabled​

enterkeyhint​

errorText​

fill​

helperText​

inputmode​

label​

labelPlacement​

max​

maxlength​

min​

minlength​

mode​

multiple​

name​

pattern​

placeholder​

readonly​

required​

shape​

spellcheck​

step​

type​

value​

イベント​

メソッド​

getInputElement​

setFocus​

CSS Shadow Parts​

CSSカスタムプロパティ​

Slots​

Contents

基本的な使い方

Types

Labels

Label Placement

Label Slot （実験的）

No Visible Label

Clear Options

Filled Inputs

Helper & Error Text

Input Counter

Filtering User Input

入力マスキング

Start and End Slots (experimental)

テーマ

配色

CSSカスタムプロパティ

Interfaces

InputChangeEventDetail

InputCustomEvent

プロパティ

autocapitalize

autocomplete

autocorrect

autofocus

clearInput

clearInputIcon

clearOnEdit

color

counter

counterFormatter

debounce

disabled

enterkeyhint

errorText

fill

helperText

inputmode

label

labelPlacement

max

maxlength

min

minlength

mode

multiple

name

pattern

placeholder

readonly

required

shape

spellcheck

step

type

value

イベント

メソッド

getInputElement

setFocus

CSS Shadow Parts

CSSカスタムプロパティ

Slots