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​

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'

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

disabled​

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

fill​

DescriptionThe fill for the input boxes. If "solid" the input boxes will have a background. If "outline" the input boxes will be transparent with a border.
Attributefill
Type"outline" ｜ "solid" ｜ undefined
Default'outline'

inputmode​

DescriptionA hint to the browser for which keyboard to display. Possible values: "none", "text", "tel", "url", "email", "numeric", "decimal", and "search".

For numbers (type="number"): "numeric" For text (type="text"): "text"
Attributeinputmode
Type"decimal" ｜ "email" ｜ "none" ｜ "numeric" ｜ "search" ｜ "tel" ｜ "text" ｜ "url" ｜ undefined
Defaultundefined

length​

DescriptionThe number of input boxes to display.
Attributelength
Typenumber
Default4

pattern​

DescriptionA regex pattern string for allowed characters. Defaults based on type.

For numbers (type="number"): "[\p{N}]" For text (type="text"): "[\p{L}\p{N}]"
Attributepattern
Typestring ｜ undefined
Defaultundefined

readonly​

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

separators​

DescriptionWhere separators should be shown between input boxes. Can be a comma-separated string or an array of numbers.

For example: "3" will show a separator after the 3rd input box. [1,4] will show a separator after the 1st and 4th input boxes. "all" will show a separator between every input box.
Attributeseparators
Typenumber[] ｜ string ｜ undefined
Defaultundefined

shape​

DescriptionThe shape of the input boxes. If "round" they will have an increased border radius. If "rectangular" they will have no border radius. If "soft" they will have a soft border radius.
Attributeshape
Type"rectangular" ｜ "round" ｜ "soft"
Default'round'

size​

DescriptionThe size of the input boxes.
Attributesize
Type"large" ｜ "medium" ｜ "small"
Default'medium'

type​

DescriptionThe type of input allowed in the input boxes.
Attributetype
Type"number" ｜ "text"
Default'number'

value​

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

Events​

NameDescriptionBubbles
ionBlurEmitted when the input group 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.

The ionChange event fires when the <ion-input-otp> component loses focus after its value has changed.

This event will not emit when programmatically setting the value property.		true
ionCompleteEmitted when all input boxes have been filled with valid values.true
ionFocusEmitted when the input group 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

Methods​

setFocus​

DescriptionSets focus to an input box.
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
--backgroundBackground color of the input boxes
--border-colorBorder color of the input boxes
--border-radiusBorder radius of the input boxes
--border-widthBorder width of the input boxes
--colorText color of the input
--heightHeight of input boxes
--highlight-color-focusedフォーカスされたときの入力のハイライトの色
--highlight-color-invalid入力が無効な場合のハイライトの色
--highlight-color-valid有効時の入力のハイライトの色
--margin-bottomBottom margin of the input group
--margin-endRight margin if direction is left-to-right, and left margin if direction is right-to-left of the input group
--margin-startLeft margin if direction is left-to-right, and right margin if direction is right-to-left of the input group
--margin-topTop margin of the input group
--min-widthMinimum width of input boxes
--padding-bottomBottom padding of the input group
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the input group
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the input group
--padding-topTop padding of the input group
--separator-border-radiusBorder radius of the separator between boxes
--separator-colorColor of the separator between boxes
--separator-heightHeight of the separator between boxes
--separator-widthWidth of the separator between boxes
--widthWidth of input boxes

Slots​

No slots available for this component.

Contents

Edit this page