ion-input

scoped

inputコンポーネントは、カスタム・スタイル設定と追加機能を持つHTMLのInput要素のラッパーです。HTML Inputとほとんど同じプロパティーを受け入れますが、デスクトップ・デバイスでは優れた動作をし、モバイル・デバイスではキーボードと統合されます。

基本的な使い方

Types

input コンポーネントは、"text", "password", "email", "number", "search", "tel", "url" などのテキストタイプの入力のみを対象としています。また、keyup、keydown、keypressなどの標準的なテキスト入力イベントをすべてサポートしています。デフォルトの type は "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 labels
• label slot: used for custom HTML labels (experimental)
• aria-label: used to provide a label for screen readers but adds no visible label

Label Placement

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

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には、入力の操作方法に応じて、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 で使用すべきではありません。

Helper & Error Text

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

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

Input Counter

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

Filtering User Input

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

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

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}

note

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

Theming

Colors

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-input の label プロパティを使用します。ラベルの配置は ion-input の labelPlacement プロパティで設定することができる。
2. Input固有のプロパティを ion-item から ion-input に移動します。これには、counter、counterFormatter、fill、shapeプロパティが含まれる。
3. ion-item の helper と error スロットの使用を削除し、代わりに ion-input の helperText と errorText プロパティを使用します。

JavaScript

<!-- 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>

Angular

<!-- 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>

React

{/* 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>

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>

レガシー構文の使用

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

Interfaces

InputChangeEventDetail

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

InputCustomEvent

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

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

プロパティ

accept (deprecated)

Description	この属性は無視されます。 Deprecated
Attribute	accept
Type	string ｜ undefined
Default	undefined

autocapitalize

Description	テキスト値がユーザーによって入力／編集される際に、自動的に大文字にするかどうか、またどのようにするかについて示します。利用可能なオプション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	この Boolean 属性により、ページロード時にフォームコントロールにInputフォーカスが当たるように指定することができます。
Attribute	autofocus
Type	boolean
Default	false

clearInput

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

clearOnEdit

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

color

Description	アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です．色に関する詳しい情報は theming を参照してください。
Attribute	color
Type	"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined
Default	undefined

counter

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

counterFormatter

Description	カウンターのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、カウンターのテキストは"itemLength / maxLength"に設定されています。
Attribute	undefined
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	どのエンターキーを表示するかのブラウザへのヒント。指定可能な値。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	アイテムの塗りつぶし。もし "solid" ならば、アイテムは背景を持つようになります。もし "outline" ならば、アイテムはボーダー付きの透明なものになります。md`モードでのみ使用可能です。
Attribute	fill
Type	"outline" ｜ "solid" ｜ undefined
Default	undefined

helperText

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

inputmode

Description	どのキーボードを表示するかのブラウザへのヒント。指定可能な値。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	Inputに関連する可視ラベル。
Attribute	label
Type	string ｜ undefined
Default	undefined

labelPlacement

Description	入力に対してラベルを配置する位置。"start"：ラベルはLTRでは入力の左側に、RTLでは右側に表示されます。"end"：ラベルはLTRでは入力の右側、RTLでは左側に表示されます。"floating"："floating"：ラベルは、入力にフォーカスが当たっているときや、入力に値があるときは小さく表示され、入力の上に表示されます。それ以外の場合は、入力の上に表示されます。"スタック(stacked)"：入力がぼやけた状態や値がない場合でも、ラベルは小さく表示され、入力の上に表示されます。"fixed"：ラベルの幅が固定される以外は、"start"`と同じ動作になります。長いテキストは省略記号（"..."）で切り捨てられます。
Attribute	label-placement
Type	"end" ｜ "fixed" ｜ "floating" ｜ "stacked" ｜ "start"
Default	'start'

legacy

Description	legacyプロパティをtrueに設定すると、レガシーフォームコントロールのマークアップを強制的に使用することができます。Ionicは、コンポーネントがaria-label属性またはlabelプロパティを使用している場合にのみ、最新のフォームマークアップを選択します。そのため、legacyプロパティは、この自動オプトイン動作を回避したい場合にのみ、エスケープハッチとして使用する必要があります。なお、このプロパティはIonicの今後のメジャーリリースで削除され、すべてのフォームコンポーネントはモダンフォームマークアップを使用するようオプトインされる予定です。
Attribute	legacy
Type	boolean ｜ undefined
Default	undefined

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属性）より大きくてはなりません。
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は、どのプラットフォームのスタイルを使用するかを決定します。
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	Inputが値を持つ前に表示される指示テキスト。このプロパティは、typeプロパティが "email", "number", "password", "search", "tel", "text", または "url" に設定されている場合にのみ適用され、それ以外は無視されます。
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

size

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

spellcheck

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

step

Description	min属性、max属性と連携して、値を設定する際の増分を制限することができます。設定可能な値は以下の通りです。any"`または正の浮動小数点数。
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
ionBlur	Inputのフォーカスが外れたときに発行されます。
ionChange	ionChange イベントは、ユーザーが要素の値を変更したときに <ion-input> 要素に対して発生します。 ionInput イベントとは異なり、ionChange イベントは必ずしも要素の値が変更されるたびに発生するわけではない。 ユーザーが要素と対話する方法に応じて、ionChange イベントは次のような異なるタイミングで発生します。 - ユーザーが明示的に変更をコミットしたとき (例えば、<ion-input type="date"> の日付ピッカーから日付を選択し、「Enter」キーを押すなど)。- 値が変更された後、要素がフォーカスを失ったとき：ユーザーの対話がタイピングである要素について。
ionFocus	Inputにフォーカスが当たったときに発行されます。
ionInput	ionInputイベントは <ion-input> 要素の value が変更されたときに発生するイベントです。 テキスト入力を受け付ける要素 (type=text, type=tel など) のインタフェースは InputEvent である。その他の要素のインタフェースは Event です。編集時に入力がクリアされる場合、型は null となります。

メソッド

getInputElement

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

setFocus

Description	ion-input のネイティブ input にフォーカスを設定します。グローバルな input.focus() の代わりに、このメソッドを使用します。 ページが入ったときにInputにフォーカスを当てたい開発者は、ionViewDidEnter() ライフサイクルメソッドの中で setFocus() を呼び出してください。
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	Inputの半径
--border-style	ヘルパーテキスト、エラーテキスト、カウンターを使用する場合の入力下のボーダーのスタイル
--border-width	ヘルパーテキスト、エラーテキスト、カウンターを使用する場合の入力下のボーダーの幅
--color	Inputのテキストの色
--highlight-color-focused	フォーカスされたときの入力のハイライトの色
--highlight-color-invalid	入力が無効な場合のハイライトの色
--highlight-color-valid	有効時の入力のハイライトの色
--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

No slots available for this component.