ion-input-otp

scoped

The Input OTP component is a specialized input component designed for entering one-time passwords (OTP). It provides a user-friendly interface for entering verification codes with support for multiple input boxes and automatic focus management.

Basic Usage

The component provides 4 input boxes by default, which is a common length for many verification codes. The number of input boxes can be customized using the length property.

Type

The type property determines the input format, supporting either numeric or alphanumeric verification codes. It accepts two values: number and text. It uses type="number" by default for entering numeric verification codes. When type="text" is specified, it accepts alphanumeric input. This flexibility allows handling different OTP formats, whether numeric-only codes (like SMS verification codes) or alphanumeric codes (like backup codes or recovery keys).

The type property automatically sets both the inputmode and pattern attributes:

• When type="number":
  • Sets inputmode="numeric" to show a numeric keyboard on mobile devices
  • Sets pattern="[\p{N}]" to allow only numeric input
• When type="text":
  • Sets inputmode="text" to show a standard keyboard
  • Sets pattern="[\p{L}\p{N}]" to allow alphanumeric input

See the Pattern section for more details on pattern validation and customization.

Shape

The shape property controls the border radius of the input boxes, creating rounded or sharp corners.

Fill

The fill property controls the background style of the input boxes, offering bordered or filled backgrounds.

Size

The size property provides different size options for the input boxes.

Separators

The separators property adds visual dividers between one or more of the input boxes. Separators can be defined in three ways:

• Comma-separated string of numbers (e.g., "1,3")
• Array of numbers (e.g., [1, 3])
• String "all" to show separators between every input box

The numbers represent the index after which a separator should appear. For example, "1,3" displays a separator after the first and third input box. This can be used to create visually distinct groupings of input boxes, but it will still have one value.

States

The component supports various states for automatic styling of input boxes:

• disabled and readonly states via respective properties
• Form validation states: valid and invalid visually indicated through CSS classes
• In Angular: validation states are automatically managed through the framework's value accessors and form validation
• For other frameworks: developers must manually add ion-valid, ion-invalid, and ion-touched classes
• ion-invalid styles only display when touched (ion-touched)
• ion-valid styles only display when focused (has-focus)

Pattern

The pattern property enables custom validation using regular expressions. It accepts a string regular expression or unicode regular expression to validate allowed characters. The pattern must match the entire value, not just a subset. Default patterns:

• type="number": "[\p{N}]" for matching any kind of numeric character in any script.
• type="text": "[\p{L}\p{N}]" for any kind of numeric character in any script and any kind of letter from any language.

The component will prevent users from entering any characters that don't match the specified pattern. Developers can override these defaults by providing their own pattern string to match specific input requirements.

ヒント

When using a custom pattern, remember that the type property controls which keyboard appears on mobile devices:

• Use type="number" for numeric-only patterns to show the numeric keyboard
• Use type="text" for patterns that include letters to show the alphanumeric keyboard

Theming

Colors

The color property changes the color palette for input boxes. For outline fills, this property changes the caret color, highlight color and border color. For solid fills, this property changes the caret color and highlight color.

注記

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 uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a higher specificity selector. Targeting the ion-input-otp for customization will not work; therefore we recommend adding a class and customizing it that way. Due to certain styles being applied based on the fill, you may need to override properties on the fills separately.

Accessibility

Keyboard Interactions

The keyboard navigation for Input OTP follows the ARIA Authoring Practices Guide's recommendations for composite widgets. It is treated as a composite widget because it contains multiple focusable elements (input boxes) that function as a single control.

These keyboard interactions apply to all ion-input-otp elements when the component is not disabled.

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

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

disabled

Description	trueの場合、ユーザはInputと対話することができません。
Attribute	disabled
Type	boolean
Default	false

fill

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

inputmode

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

length

Description	表示する入力ボックスの数。
Attribute	length
Type	number
Default	4

pattern

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

readonly

Description	trueの場合、ユーザーは値を変更することができません。
Attribute	readonly
Type	boolean
Default	false

separators

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

shape

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

size

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

type

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

value

Description	入力グループの値。
Attribute	value
Type	null ｜ number ｜ string ｜ undefined
Default	''

Events

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

Methods

setFocus

Description	任意の入力ボックスにフォーカスを設定します。
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

Name	Description
--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	入力ボックスの幅

MD

Name	Description
--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.