ion-input-otp
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 要素に適用されます。
| Key | Description |
|---|---|
| Tab | When 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 + Tab | When 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. |
| ArrowRight | Moves 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. |
| ArrowLeft | Moves 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 property | Fills 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. |
| Backspace | In 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 | Indicates 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". |
| Attribute | autocapitalize |
| Type | string |
| Default | 'off' |
color
| Description | The 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. |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| Default | undefined |
disabled
| Description | trueの場合、ユーザはInputと対話することができません。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
fill
| Description | The 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. |
| Attribute | fill |
| Type | "outline" ｜ "solid" ｜ undefined |
| Default | 'outline' |
inputmode
| Description | A 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" |
| Attribute | inputmode |
| Type | "decimal" ｜ "email" ｜ "none" ｜ "numeric" ｜ "search" ｜ "tel" ｜ "text" ｜ "url" ｜ undefined |
| Default | undefined |
length
| Description | The number of input boxes to display. |
| Attribute | length |
| Type | number |
| Default | 4 |
pattern
| Description | A regex pattern string for allowed characters. Defaults based on type. For numbers ( type="number"): "[\p{N}]" For text (type="text"): "[\p{L}\p{N}]" |
| Attribute | pattern |
| Type | string ｜ undefined |
| Default | undefined |
readonly
| Description | trueの場合、ユーザーは値を変更することができません。 |
| Attribute | readonly |
| Type | boolean |
| Default | false |
separators
| Description | Where 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. |
| Attribute | separators |
| Type | number[] ｜ string ｜ undefined |
| Default | undefined |
shape
| Description | The 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. |
| Attribute | shape |
| Type | "rectangular" ｜ "round" ｜ "soft" |
| Default | 'round' |
size
| Description | The size of the input boxes. |
| Attribute | size |
| Type | "large" ｜ "medium" ｜ "small" |
| Default | 'medium' |
type
| Description | The type of input allowed in the input boxes. |
| Attribute | type |
| Type | "number" ｜ "text" |
| Default | 'number' |
value
| Description | The value of the input group. |
| Attribute | value |
| Type | null ｜ number ｜ string ｜ undefined |
| Default | '' |
Events
| Name | Description | Bubbles |
|---|---|---|
ionBlur | Emitted when the input group loses focus. | true |
ionChange | The 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 |
ionComplete | Emitted when all input boxes have been filled with valid values. | true |
ionFocus | Emitted when the input group has focus. | true |
ionInput | The 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
| Description | Sets focus to an input box. |
| Signature | setFocus(index?: number) => Promise<void> |
| Parameters | index: - 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
- iOS
- MD
| Name | Description |
|---|---|
--background | Background color of the input boxes |
--border-color | Border color of the input boxes |
--border-radius | Border radius of the input boxes |
--border-width | Border width of the input boxes |
--color | Text color of the input |
--height | Height of input boxes |
--highlight-color-focused | フォーカスされたときの入力のハイライトの色 |
--highlight-color-invalid | 入力が無効な場合のハイ ライトの色 |
--highlight-color-valid | 有効時の入力のハイライトの色 |
--margin-bottom | Bottom margin of the input group |
--margin-end | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the input group |
--margin-start | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the input group |
--margin-top | Top margin of the input group |
--min-width | Minimum width of input boxes |
--padding-bottom | Bottom padding of the input group |
--padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input group |
--padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input group |
--padding-top | Top padding of the input group |
--separator-border-radius | Border radius of the separator between boxes |
--separator-color | Color of the separator between boxes |
--separator-height | Height of the separator between boxes |
--separator-width | Width of the separator between boxes |
--width | Width of input boxes |
| Name | Description |
|---|---|
--background | Background color of the input boxes |
--border-color | Border color of the input boxes |
--border-radius | Border radius of the input boxes |
--border-width | Border width of the input boxes |
--color | Text color of the input |
--height | Height of input boxes |
--highlight-color-focused | フォーカスされたときの入力のハイライトの色 |
--highlight-color-invalid | 入力が無効な場合のハイライトの色 |
--highlight-color-valid | 有効時の入力のハイライトの色 |
--margin-bottom | Bottom margin of the input group |
--margin-end | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the input group |
--margin-start | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the input group |
--margin-top | Top margin of the input group |
--min-width | Minimum width of input boxes |
--padding-bottom | Bottom padding of the input group |
--padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input group |
--padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input group |
--padding-top | Top padding of the input group |
--separator-border-radius | Border radius of the separator between boxes |
--separator-color | Color of the separator between boxes |
--separator-height | Height of the separator between boxes |
--separator-width | Width of the separator between boxes |
--width | Width of input boxes |
Slots
No slots available for this component.