Skip to main content
Version: v8

ion-input-otp

scoped

Input OTP コンポーネントは、ワンタイムパスワード（OTP）入力用に設計された入力コンポーネントです。複数の入力ボックスと自動フォーカス管理をサポートし、 検証コードを入力するためのユーザーフレンドリーなインターフェイスを提供します。

基本的な使用法​

このコンポーネントはデフォルトで4つの入力ボックスを提供します。入力ボックスの数は length プロパティを使用してカスタマイズすることができます。

Type​

type プロパティは入力形式を決定し、数字または英数字の検証コードをサポートします。プロパティには2つの値を指定できる： numberと text です。デフォルトでは type="number" を使用し、数字認証コードを入力を受け付けます。 type="text" を指定すると、英数字の入力を受け付ける。この柔軟性により、数字のみのコード（SMS 認証コードのような）や英数字のコード（バックアップコードやリカバリキーのような）など、さまざまな OTP フォーマットを扱うことができます

type プロパティは inputmode 属性と pattern 属性の両方を自動的に設定します：

  • type="number" の場合：
    • inputmode="numeric"を設定し、モバイルデバイスに数字キーボードを表示します。
    • pattern="[\p{N}]"を設定し、数字入力のみを許可します。
  • type="text"の場合
    • 標準のキーボードを表示するには inputmode="text" を設定します。
    • pattern="[\p{L}\p{N}]" を設定し、英数字の入力を許可する。

パターンの検証やカスタマイズの詳細については、パターンのセクションを参照してください。

Shape​

shape プロパティは、入力ボックスのボーダー半径をコントロールし、丸みを帯びたコーナーやシャープなコーナーを作成します。

Fill​

fill プロパティは入力ボックスの背景のスタイルをコントロールし、縁取りまたは塗りつぶしの背景を提供します。

Size​

sizeプロパティは入力ボックスに異なるサイズのオプションを提供します。

Separators​

separators プロパティは1つ以上の入力ボックスの間に視覚的な仕切りを追加します。セパレータは3つの方法で定義できます：

  • カンマで区切られた数値の文字列 (例: "1,3")
  • 数字の配列 (例: [1, 3])
  • 文字列 "all" (すべての入力ボックスの間にセパレータを表示する)

数字はセパレータが表示されるべきインデックスを表します。例えば、"1,3" は1番目と3番目の入力ボックスの後にセパレータを表示します。これは、入力ボックスを視覚的に区別してグループ化するために使用できますが、それでも値は1つです。

States​

このコンポーネントは、入力ボックスの自動スタイリングのためのさまざまな状態をサポートしています：

  • それぞれのプロパティによる disabled と readonly 状態
  • フォームバリデーション状態： CSSクラスによって視覚的に示される valid と invalid の状態
  • Angularの場合：バリデーション状態は、フレームワークの値アクセサとフォームバリデーションによって自動的に管理されます
  • 他のフレームワークの場合: 開発者は ion-valid、ion-invalid、ion-touched クラスを手動で追加する必要があります
  • onvalid スタイルはタッチされたときのみ表示されます (ion-touched)
  • ion-valid スタイルはフォーカスされたときのみ表示されます (has-focus)

Pattern​

pattern プロパティは正規表現を使ったカスタムバリデーションを可能にします。 文字列の正規表現またはunicodeの正規表現を使用して、許可される文字を検証することができます。 patternはサブセットだけでなく、値全体にマッチする必要があります。デフォルトのパターン

  • type="number": "[\p{N}]" スクリプト内のあらゆる種類の数値文字にマッチします。
  • type="text": "[\p{L}\p{N}]" あらゆるスクリプトのあらゆる種類の数字と、あらゆる言語のあらゆる種類の文字にマッチします。

このコンポーネントは、指定されたパターンにマッチしない文字の入力を防ぎます。開発者は、特定の入力要件に一致する独自のパターン文字列を提供することで、これらのデフォルトをオーバーライドできます。

tip

カスタム pattern を使用する場合、type プロパティがモバイルデバイスに表示されるキーボードを制御することを覚えておいてください：

  • 数字のみのパターンには type="number" を使い、数字キーボードを表示します。
  • 英数字キーボードを表示するには、文字を含むパターンには type="text" を使用します。

Theming​

Colors​

colorプロパティは入力ボックスのカラーパレットを変更します。アウトライン塗りつぶしの場合、このプロパティはキャレットカラー、ハイライトカラー、ボーダーカラーを変更します。 solid 塗りつぶしの場合、このプロパティはキャレットカラーとハイライトカラーを変更します。

note

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

CSS Custom Properties​

Input OTPはスコープされたカプセル化を使用しています。これは、実行時に各スタイルに追加のクラスを追加することで、CSSを自動的にスコープすることを意味します。CSSでスコープされたセレクタをオーバーライドするには、より高い特異性 セレクタが必要です。そのため、クラスを追加してカスタマイズすることをお勧めします。特定のスタイルが fill に基づいて適用されるため、fill のプロパティを個別にオーバーライドする必要があるかもしれません。

Accessibility​

Keyboard Interactions​

Input OTPのキーボードナビゲーションは、ARIA Authoring Practices Guide の複合ウィジェットに関する推奨に従っています。これは、1つのコントロールとして機能する複数のフォーカス可能な要素（入力ボックス）を含むため、複合ウィジェットとして扱われます。

コンポーネントが無効になっていない場合、これらのキーボード操作はすべての ion-input-otp 要素に適用されます。

KeyDescription
TabWhen first tabbing into the component, focus moves to the first empty box. If all boxes are filled, focus moves to the last box. Once inside the component, tabbing moves to the next focusable element on the page.
Shift + TabWhen tabbing backwards into the component, focus moves to the first empty box. If all boxes are filled, focus moves to the last box. Once inside the component, shift tabbing focus moves to the previous focusable element on the page.
ArrowRightMoves focus to the next input box, stopping at the first empty box. In RTL mode, moves focus back to any previous box that contains a value.
ArrowLeftMoves focus back to any previous box that contains a value. In RTL mode, moves focus to the next input box, stopping at the first empty box.
Any character matching the pattern propertyFills the current box and automatically moves focus to the next empty box. If all boxes are filled, focus remains on the last box. If the current box has a value, override the value with the entered character. In RTL mode, input fills boxes from right to left.
BackspaceIn an empty box: moves focus back one box and clears its value.
In a box with a value: clears that value.
With values in boxes to the right: shifts them all one position to the left. In RTL mode, with values in boxes to the left: shifts them all one position to the right.
Ctrl + V
Cmd + V		Pastes content starting from the first box, regardless of which box is currently focused. All existing values are cleared before pasting. For example, if you have "1234" in all boxes and paste "56", the result will be "56" in the first two boxes with the remaining boxes empty. If the pasted content is longer than the available boxes, the extra characters are ignored.

Properties​

autocapitalize​

Descriptionテキスト値がユーザーによって入力／編集される際に、自動的に大文字にするかどうか、またどのようにするかについて示します。利用可能なオプション: "off", "none", "on", "sentences", "words", "characters".
Attributeautocapitalize
Typestring
Default'off'

color​

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

disabled​

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

fill​

Description入力ボックスの塗りつぶし。"solid" の場合は背景色が付き、"outline" の場合は枠線付きで透過表示になります。
Attributefill
Type"outline" ｜ "solid" ｜ undefined
Default'outline'

inputmode​

Descriptionどのキーボードを表示するかのブラウザへのヒント。指定可能な値は "none", "text", "tel", "url", "email", "numeric", "decimal", "search"。数値入力（type="number"）には "numeric"、テキスト（type="text"）には "text" を使用します。
Attributeinputmode
Type"decimal" ｜ "email" ｜ "none" ｜ "numeric" ｜ "search" ｜ "tel" ｜ "text" ｜ "url" ｜ undefined
Defaultundefined

length​

Description表示する入力ボックスの数。
Attributelength
Typenumber
Default4

pattern​

Description許可される文字の正規表現パターン文字列。型に応じたデフォルトがあります。数値（type="number"）は "[\p{N}]"、テキスト（type="text"）は "[\p{L}\p{N}]"。
Attributepattern
Typestring ｜ undefined
Defaultundefined

readonly​

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

separators​

Description入力ボックス間に区切り線を表示する場所。カンマ区切り文字列または数値配列で指定できます。例: "3" は 3 番目の入力ボックスの後に区切りを表示、[1,4] は 1 番目と 4 番目の後に表示、"all" はすべての入力ボックス間に表示します。
Attributeseparators
Typenumber[] ｜ string ｜ undefined
Defaultundefined

shape​

Description入力ボックスの形状。"round" は角の丸みを大きくし、"rectangular" は角丸なし、"soft" はやわらかい角丸になります。
Attributeshape
Type"rectangular" ｜ "round" ｜ "soft"
Default'round'

size​

Description入力ボックスのサイズ。
Attributesize
Type"large" ｜ "medium" ｜ "small"
Default'medium'

type​

Description入力ボックスに許可される入力種別。
Attributetype
Type"number" ｜ "text"
Default'number'

value​

Description入力グループの値。
Attributevalue
Typenull ｜ number ｜ string ｜ undefined
Default''

Events​

NameDescriptionBubbles
ionBlur入力グループのフォーカスが外れたときに発行されます。true
ionChangeユーザーが入力値を変更したときに ionChange イベントが発生します。ionInput と異なり、ionChange は入力途中ではなく変更が確定したときにのみ発生します。<ion-input-otp> の値が変更された後にフォーカスを失ったときにも発生します。プログラムで value を設定した場合には発生しません。true
ionCompleteすべての入力ボックスが有効な値で埋められたときに発行されます。true
ionFocus入力グループにフォーカスが当たったときに発行されます。true
ionInputionInput イベントは、ユーザが入力値を変更するたびに発生する。ionChange イベントとは異なり、 ionInput イベントは入力値が変更されるたびに発生する。これは通常、ユーザが入力を行うたびに発生します。 テキスト入力を受け付ける要素(type=text, type=telなど)の場合、インターフェイスはInputEventとなります。その他の要素の場合、インターフェイスはEventとなります。編集時に入力がクリアされる場合、型は null となる。true

Methods​

setFocus​

Description任意の入力ボックスにフォーカスを設定します。
SignaturesetFocus(index?: number) => Promise<void>
Parametersindex: - The index of the input box to focus (0-based). If provided and the input box has a value, the input box at that index will be focused. Otherwise, the first empty input box or the last input if all are filled will be focused.

CSS Shadow Parts​

No CSS shadow parts available for this component.

CSS Custom Properties​

NameDescription
--background入力ボックスの背景色
--border-color入力ボックスのボーダーカラー
--border-radius入力ボックスのボーダー半径
--border-width入力ボックスのボーダー幅
--color入力テキストの色
--height入力ボックスの高さ
--highlight-color-focusedフォーカスされたときの入力のハイライトの色
--highlight-color-invalid入力が無効な場合のハイライトの色
--highlight-color-valid有効時の入力のハイライトの色
--margin-bottom入力グループの下マージン
--margin-end入力グループの左右方向に応じた右/左マージン
--margin-start入力グループの左右方向に応じた左/右マージン
--margin-top入力グループの上マージン
--min-width入力ボックスの最小幅
--padding-bottom入力グループの下パディング
--padding-end入力グループの左右方向に応じた右/左パディング
--padding-start入力グループの左右方向に応じた左/右パディング
--padding-top入力グループの上パディング
--separator-border-radiusボックス間セパレーターのボーダー半径
--separator-colorボックス間セパレーターの色
--separator-heightボックス間セパレーターの高さ
--separator-widthボックス間セパレーターの幅
--width入力ボックスの幅

Slots​

No slots available for this component.

Contents

Edit this page