メインコンテンツまでスキップ
バージョン: v8 (beta)

ion-input

scoped

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

基本的な使い方

Types

input コンポーネントは、"text", "password", "email", "number", "search", "tel", "url" などのテキストタイプの入力のみを対象としています。また、keyupkeydownkeypressなどの標準的なテキスト入力イベントをすべてサポートしています。デフォルトの 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" のいずれかに設定することができます。

fill スタイルはInputコンテナを視覚的に定義するため、fill を使用するInputは ion-item で使用すべきではありません。

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

Helper & Error Text

ヘルパーテキストとエラーテキストは、helperTexterrorText プロパティを使用して入力の内部で使用することができます。エラーテキストは、 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}
注記

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

注記

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モードでは、このプロパティはキャレットカラーとハイライト/アンダーラインカラーを変更します。

CSSカスタムプロパティ

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

レガシーな Input 構文からの移行

Ionic 7.0では、よりシンプルなInput構文が導入されました。この新しい構文は、Inputのセットアップに必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。

開発者は、この移行を一度に1つのInputで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。

最新の構文の使い方

最新の構文を使うには、3つのステップがあります。

  1. ion-label を削除して、代わりに ion-inputlabel プロパティを使用します。ラベルの配置は ion-inputlabelPlacement プロパティで設定することができる。
  2. Input固有のプロパティを ion-item から ion-input に移動します。これには、countercounterFormatterfillshapeプロパティが含まれる。
  3. ion-itemhelpererror スロットの使用を削除し、代わりに ion-inputhelperTexterrorText プロパティを使用します。
<!-- 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>

レガシー構文の使用

Ionicは、アプリが最新のInput構文を使用しているかどうかをヒューリスティックに検出します。場合によっては、レガシーな構文を使い続けることが望ましいこともあります。開発者は、ion-inputlegacyプロパティをtrueに設定することで、そのInputのインスタンスにレガシー構文を使用するように強制できます。

Interfaces

InputChangeEventDetail

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

InputCustomEvent

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

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

プロパティ

accept (deprecated)

DescriptionThis attribute is ignored. 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

DescriptionIndicates whether the value of the control can be automatically completed by the browser.
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

DescriptionWhether auto correction should be enabled when the user is entering/editing the text value.
Attributeautocorrect
Type"off" | "on"
Default'off'

autofocus

DescriptionSets 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.
Attributeautofocus
Typeboolean
Defaultfalse

clearInput

DescriptionIf true, a clear icon will appear in the input when there is a value. Clicking it clears the input.
Attributeclear-input
Typeboolean
Defaultfalse

clearOnEdit

DescriptionIf true, the value will be cleared after focus upon edit. Defaults to true when type is "password", false for all other types.
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 | undefined
Defaultundefined

counter

DescriptionIf true, a character counter will display the ratio of characters used and the total character limit. Developers must also set the maxlength property for the counter to be calculated correctly.
Attributecounter
Typeboolean
Defaultfalse

counterFormatter

DescriptionA 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.
Attributeundefined
Type((inputLength: number, maxLength: number) => string) | undefined
Defaultundefined

debounce

DescriptionSet the amount of time, in milliseconds, to wait to trigger the ionInput event after each keystroke.
Attributedebounce
Typenumber | undefined
Defaultundefined

disabled

DescriptionIf true, the user cannot interact with the 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

errorText

DescriptionText that is placed under the input and displayed when an error is detected.
Attributeerror-text
Typestring | undefined
Defaultundefined

fill

DescriptionThe 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.
Attributefill
Type"outline" | "solid" | undefined
Defaultundefined

helperText

DescriptionText that is placed under the input and displayed when no error is detected.
Attributehelper-text
Typestring | 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

label

DescriptionThe 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.
Attributelabel
Typestring | undefined
Defaultundefined

labelPlacement

DescriptionWhere 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 ("...").
Attributelabel-placement
Type"end" | "fixed" | "floating" | "stacked" | "start"
Default'start'

legacy

DescriptionSet the legacy property to true to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the aria-label attribute or the label property. As a result, the legacy property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
Attributelegacy
Typeboolean | undefined
Defaultundefined

max

DescriptionThe maximum value, which must not be less than its minimum (min attribute) value.
Attributemax
Typenumber | string | undefined
Defaultundefined

maxlength

DescriptionIf the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters that the user can enter.
Attributemaxlength
Typenumber | undefined
Defaultundefined

min

DescriptionThe minimum value, which must not be greater than its maximum (max attribute) value.
Attributemin
Typenumber | string | undefined
Defaultundefined

minlength

DescriptionIf the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters that the user can enter.
Attributeminlength
Typenumber | undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

multiple

DescriptionIf true, the user can enter more than one value. This attribute applies when the type attribute is set to "email", otherwise it is ignored.
Attributemultiple
Typeboolean | undefined
Defaultundefined

name

DescriptionThe name of the control, which is submitted with the form data.
Attributename
Typestring
Defaultthis.inputId

pattern

DescriptionA regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is "text", "search", "tel", "url", "email", "date", or "password", otherwise it is ignored. When the type attribute is "date", pattern will only be used in browsers that do not support the "date" input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.
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

DescriptionIf true, the user cannot modify the value.
Attributereadonly
Typeboolean
Defaultfalse

required

DescriptionIf true, the user must fill in a value before submitting a form.
Attributerequired
Typeboolean
Defaultfalse

shape

DescriptionThe shape of the input. If "round" it will have an increased border radius.
Attributeshape
Type"round" | undefined
Defaultundefined

size

Description
Attributesize
Typenumber | undefined
Defaultundefined

spellcheck

DescriptionIf true, the element will have its spelling and grammar checked.
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

DescriptionThe type of control to display. The default type is text.
Attributetype
Type"date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "tel" | "text" | "time" | "url" | "week"
Default'text'

value

DescriptionThe value of the input.
Attributevalue
Typenull | number | string | undefined
Default''

イベント

NameDescriptionBubbles
ionBlurEmitted when the input loses focus.true
ionChangeThe 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.
true
ionFocusEmitted when the input has focus.true
ionInputThe 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

DescriptionReturns the native <input> element used under the hood.
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.

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.
SignaturesetFocus() => Promise<void>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

NameDescription
--backgroundBackground of the input
--border-colorColor of the border below the input when using helper text, error text, or counter
--border-radiusRadius of the input. A large radius may display unevenly when using fill="outline"; if needed, use shape="round" instead or increase --padding-start.
--border-styleStyle of the border below the input when using helper text, error text, or counter
--border-widthWidth of the border below the input when using helper text, error text, or counter
--colorColor of the input text
--highlight-color-focusedThe color of the highlight on the input when focused
--highlight-color-invalidThe color of the highlight on the input when invalid
--highlight-color-validThe color of the highlight on the input when valid
--padding-bottomBottom padding of the input
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the input
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the input
--padding-topTop padding of the input
--placeholder-colorColor of the input placeholder text
--placeholder-font-styleFont style of the input placeholder text
--placeholder-font-weightFont weight of the input placeholder text
--placeholder-opacityOpacity of the input placeholder text

Slots

NameDescription
endContent to display at the trailing edge of the input. (EXPERIMENTAL)
labelThe label text to associate with the input. Use the labelPlacement property to control where the label is placed relative to the input. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)
startContent to display at the leading edge of the input. (EXPERIMENTAL)