ion-input

scoped

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

基本的な使い方

<ion-list>
  <ion-item>
    <ion-input label="Default input"></ion-input>
  </ion-item>

  <ion-item>
    <ion-input label="Input with placeholder" placeholder="Enter company name"></ion-input>
  </ion-item>

  <ion-item>
    <ion-input label="Input with value" value="121 S Pinckney St #300"></ion-input>
  </ion-item>

  <ion-item>
    <ion-input label="Readonly input" value="Madison" [readonly]="true"></ion-input>
  </ion-item>

  <ion-item>
    <ion-input label="Disabled input" value="53703" [disabled]="true"></ion-input>
  </ion-item>
</ion-list>

Types

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

<ion-list>
  <ion-list>
    <ion-item>
      <ion-input label="Text input" placeholder="Enter text"></ion-input>
    </ion-item>

    <ion-item>
      <ion-input label="Number input" type="number" placeholder="000"></ion-input>
    </ion-item>

    <ion-item>
      <ion-input label="Password input" type="password" value="password"></ion-input>
    </ion-item>

    <ion-item>
      <ion-input label="Email input" type="email" placeholder="email@domain.com"></ion-input>
    </ion-item>

    <ion-item>
      <ion-input label="Telephone input" type="tel" placeholder="888-888-8888"></ion-input>
    </ion-item>
  </ion-list>
</ion-list>

Labels

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

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

Label Placement

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

<ion-list>
  <ion-item>
    <ion-input label="Default label" placeholder="Enter text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-input label="Fixed label" labelPlacement="fixed" placeholder="Enter text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-input label="Stacked label" labelPlacement="stacked" placeholder="Enter text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-input label="Floating label" labelPlacement="floating" placeholder="Enter text"></ion-input>
  </ion-item>
</ion-list>

Label Slot （実験的）

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

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

<ion-list>
  <ion-item>
    <ion-input labelPlacement="floating" value="hi@ionic.io">
      <div slot="label">Email <ion-text color="danger">(Required)</ion-text></div>
    </ion-input>
  </ion-item>
</ion-list>

No Visible Label

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

<ion-list>
  <ion-item>
    <ion-input aria-label="Email" value="hi@ionic.io"></ion-input>
  </ion-item>
</ion-list>

Clear Options

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

<ion-list>
  <ion-item>
    <ion-input
      label="Input with clear button"
      labelPlacement="stacked"
      [clearInput]="true"
      placeholder="Enter text to see clear button"
      value="Default value"
    >
    </ion-input>
  </ion-item>

  <ion-item>
    <ion-input
      label="Input with clear on edit"
      labelPlacement="stacked"
      [clearOnEdit]="true"
      placeholder="Enter text, leave the input, come back and type to clear"
    >
    </ion-input>
  </ion-item>

  <ion-item>
    <ion-input
      label="Password input"
      labelPlacement="stacked"
      type="password"
      placeholder="Enter text, leave the input, come back and type to clear"
    >
    </ion-input>
  </ion-item>
</ion-list>

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.

<ion-input label="Solid input" label-placement="floating" fill="solid" placeholder="Enter text"></ion-input>

<br />

<ion-input label="Outline input" label-placement="floating" fill="outline" placeholder="Enter text"></ion-input>

Helper & Error Text

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

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

<ion-input
  type="email"
  fill="solid"
  label="Email"
  labelPlacement="floating"
  helperText="Enter a valid email"
  errorText="Invalid email"
  ngModel
  email
></ion-input>

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.

src/app/example.component.html

<ion-input label="Default counter" labelPlacement="floating" [counter]="true" maxlength="20"></ion-input>

<ion-input
  id="custom-input"
  label="Custom Counter Format"
  labelPlacement="floating"
  [counter]="true"
  maxlength="20"
  [counterFormatter]="customCounterFormatter"
></ion-input>

src/app/example.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
})
export class ExampleComponent {
  customCounterFormatter(inputLength: number, maxLength: number) {
    return `${maxLength - inputLength} characters remaining`;
  }
}

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.

<ion-list>
  <ion-item>
    <ion-input label="Text input" placeholder="Enter text"></ion-input>
  </ion-item>

  <div class="ion-padding-start">
    <ion-input label="Counter input" [counter]="true" maxlength="20"></ion-input>
  </div>
</ion-list>

Filtering User Input

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

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

src/app/example.component.html

<ion-list>
  <ion-item>
    <ion-input
      label="Alphanumeric Characters"
      [value]="inputModel"
      (ionInput)="onInput($event)"
      #ionInputEl
    ></ion-input>
  </ion-item>
</ion-list>

src/app/example.component.ts

import { Component, ViewChild } from '@angular/core';
import type { IonInput } from '@ionic/angular';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
})
export class ExampleComponent {
  inputModel = '';

  @ViewChild('ionInputEl', { static: true }) ionInputEl!: IonInput;

  onInput(ev) {
    const value = ev.target!.value;

    // Removes non alphanumeric characters
    const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');

    /**
     * Update both the state variable and
     * the component to keep them in sync.
     */
    this.ionInputEl.value = this.inputModel = filteredValue;
  }
}

入力マスキング

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

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

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

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { IonicModule } from '@ionic/angular';

import { AppComponent } from './app.component';
import { ExampleComponent } from './example.component';

import { MaskitoModule } from '@maskito/angular';

@NgModule({
  imports: [BrowserModule, FormsModule, MaskitoModule, IonicModule.forRoot({})],
  declarations: [AppComponent, ExampleComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

src/app/example.component.html

<ion-list>
  <ion-item>
    <ion-input
      label="Card number"
      placeholder="0000 0000 0000 0000"
      [maskito]="cardMask"
      [maskitoElement]="maskPredicate"
    ></ion-input>
  </ion-item>
  <ion-item>
    <ion-input
      label="US phone number"
      placeholder="+1 (xxx) xxx-xxxx"
      [maskito]="phoneMask"
      [maskitoElement]="maskPredicate"
    ></ion-input>
  </ion-item>
</ion-list>

src/app/example.component.ts

import { Component } from '@angular/core';

import { MaskitoOptions, MaskitoElementPredicateAsync } from '@maskito/core';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
})
export class ExampleComponent {
  readonly phoneMask: MaskitoOptions = {
    mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
  };

  readonly cardMask: MaskitoOptions = {
    mask: [
      ...Array(4).fill(/\d/),
      ' ',
      ...Array(4).fill(/\d/),
      ' ',
      ...Array(4).fill(/\d/),
      ' ',
      ...Array(4).fill(/\d/),
      ' ',
      ...Array(3).fill(/\d/),
    ],
  };

  readonly maskPredicate: MaskitoElementPredicateAsync = async (el) => (el as HTMLIonInputElement).getInputElement();
}

note

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

テーマ

Colors

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

<ion-input aria-label="Primary input" color="primary" placeholder="Primary input"></ion-input>
<ion-input aria-label="Secondary input" color="secondary" placeholder="Secondary input"></ion-input>
<ion-input aria-label="Tertiary input" color="tertiary" placeholder="Tertiary input"></ion-input>
<ion-input aria-label="Success input" color="success" placeholder="Success input"></ion-input>
<ion-input aria-label="Warning input" color="warning" placeholder="Warning input"></ion-input>
<ion-input aria-label="Danger input" color="danger" placeholder="Danger input"></ion-input>
<ion-input aria-label="Light input" color="light" placeholder="Light input"></ion-input>
<ion-input aria-label="Medium input" color="medium" placeholder="Medium input"></ion-input>
<ion-input aria-label="Dark input" color="dark" placeholder="Dark input"></ion-input>

CSSカスタムプロパティ

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

src/app/example.component.html

<ion-input
  aria-label="Custom input"
  placeholder="Custom input"
  class="custom"
  helperText="Helper text"
  [counter]="true"
  [maxlength]="20"
></ion-input>

src/app/example.component.css

ion-input.custom {
  --background: #373737;
  --color: #fff;
  --placeholder-color: #ddd;
  --placeholder-opacity: 0.8;

  --padding-bottom: 10px;
  --padding-end: 10px;
  --padding-start: 10px;
  --padding-top: 10px;
}

src/global.css

/**
 * Since we are styling elements inside of ion-input
 * we need to move this CSS to a global stylesheet. Otherwise,
 * Angular components with encapsulation enabled will add
 * scoped style attributes to these selectors.
 */
ion-input.custom.ios .input-bottom .helper-text,
ion-input.custom.ios .input-bottom .counter,
ion-input.custom.md .input-bottom .helper-text,
ion-input.custom.md .input-bottom .counter {
  color: var(--ion-color-primary);
}

レガシーな 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 ｜ 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	入力に関連付けられた可視ラベル。 プレーンテキストのラベルをレンダリングする必要がある場合に使用する。 両方が使用されている場合、label プロパティが label スロットよりも優先される。
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
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 イベントは、ユーザが入力値を変更したときに発生する。ionInput イベントとは異なり、ionChange イベントは変更がコミットされたときにのみ発生する。 ユーザが明示的に変更をコミットしたとき (例えば、<ion-input type="date"> の日付ピッカーから日付を選択したり、"Enter" キーを押したりしたときなど)。- 値が変更された後、要素がフォーカスを失ったとき: ユーザーのインタラクションがタイピングである要素の場合。
ionFocus	Inputにフォーカスが当たったときに発行されます。
ionInput	ionInput イベントは、ユーザが入力値を変更するたびに発生する。ionChange イベントとは異なり、 ionInput イベントは入力値が変更されるたびに発生する。これは通常、ユーザが入力を行うたびに発生します。 テキスト入力を受け付ける要素(type=text, type=telなど)の場合、インターフェイスはInputEventとなります。その他の要素の場合、インターフェイスはEventとなります。編集時に入力がクリアされる場合、型は null となる。

メソッド

getInputElement

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

setFocus

Description	ion-inputのネイティブinputにフォーカスを設定する。グローバルなinput.focus()の代わりにこのメソッドを使用する。 ページ入力時に入力にフォーカスを当てたい場合は、ionViewDidEnter()ライフサイクルメソッド内でsetFocus()を呼び出す必要がある。 オーバーレイが表示されたときに入力にフォーカスを当てたい開発者は、didPresentが解決した後に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	入力の半径。fill="outline "を使う場合、半径が大きいと表示が不 均一になることがある。
--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

Name	Description
label	入力に関連付けるラベルテキスト。labelPlacement`プロパティを使用すると、入力に対してラベルを配置する位置を制御することができる。ラベルをカスタム HTML でレンダリングする必要がある場合に使用します。(EXPERIMENTAL)