OTP Input
The OTP input is used for MFA procedure of authenticating users by a one-time password.
TIP
This feature was introduced in v3.4.0 (Blackguard)
Usage
Here we display a list of settings that could be applied within an application.
API
| Component | Description |
|---|---|
| v-otp-input | Primary Component |
Anatomy
The v-otp-input component is a collection of v-field components that combine to create a single input.
| Element / Area | Description |
|---|---|
| 1. Container | The OTP input container holds a number of v-field components |
| 2. Field | The v-field component is used to create a single input field |
Guide
The v-otp-input component is a collection of v-field components that combine to create a single input. It is used to validate a one-time password (OTP) that is sent to the user via email or SMS.
The following code snippet is an example of a basic v-otp-input component.
<v-otp-input></v-otp-input>Props
The v-otp-input component has support for most of v-field's props and is follows the same design patterns as other inputs.
Length
The length prop determines the number of v-field components that are rendered. The default value is 6.
Focus-all
The autofocus prop automatically focuses the first element in the v-otp-input component.
Error
The error prop puts the v-otp-input into an error state. This is useful for displaying validation errors.
Variants
The v-otp-input component supports the same variants as v-field, v-text-field and other inputs.
Loader
The loader prop displays a loader when the v-otp-input component is in a loading state. When complete, emits a finish event.
Examples
The following are a collection of examples that demonstrate more advanced and real world use of the v-otp-input component.
Card variants
The following example is a detailed example of a v-otp-input component used within a card.
Mobile text
The following example is a detailed example of a v-otp-input component used with mobile text.
Verify account
The following example is a detailed example of a v-otp-input component used to verify a user's account.
Divider
The following example is a detailed example of a v-otp-input component used with a divider.