Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://ionicframework.com/docs/api/input-otp below:

ion-input-otp: One-Time Password Input Component

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.

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.

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.

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

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

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

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.

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)

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.

tip

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

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.

note

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

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.

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.

For numbers (type="number"): "numeric" For text (type="text"): "text"

For numbers (type="number"): "[\p{N}]" For text (type="text"): "[\p{L}\p{N}]"

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.

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.

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.

No CSS shadow parts available for this component.

• iOS
• MD

No slots available for this component.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4