packages/docs/src/pages/en/components/otp-input.md
The OTP input is used for MFA procedure of authenticating users by a one-time password.
<PageFeatures />Here we display a list of settings that could be applied within an application.
<ExamplesUsage name="v-otp-input" /> <PromotedEntry />| Component | Description |
|---|---|
| v-otp-input | Primary Component |
| v-otp-field | Sub-component used to render an individual OTP character field |
| v-otp-group | Sub-component used to group fields together, with optional merged styling |
| v-otp-separator | Sub-component used to display a visual separator between fields or groups |
The v-otp-input component uses a single hidden input element for keyboard interaction, and renders visual v-field components for each character slot.
| Element / Area | Description |
|---|---|
| 1. Container | The OTP input container holds the visual fields and the hidden input element |
| 2. Field | A v-field component representing a single character slot |
The v-otp-input component is used to validate a one-time password (OTP) that is sent to the user via email or SMS. It renders a configurable number of character fields and handles keyboard navigation, paste, and autofill automatically.
The following code snippet is an example of a basic v-otp-input component.
<v-otp-input></v-otp-input>
The v-otp-input component has support for most of v-field's props and is follows the same design patterns as other inputs.
The length prop determines the number of v-field components that are rendered. The default value is 6.
The autofocus prop automatically focuses the first element in the v-otp-input component.
The error prop puts the v-otp-input into an error state. This is useful for displaying validation errors.
The v-otp-input component supports the same variants as v-field, v-text-field and other inputs.
Using masked prop you can hide the entered characters. It is similar to a type="password", but makes it possible to also restrict characters to digits with type="number".
The loader prop displays a loader when the v-otp-input component is in a loading state. When complete, emits a finish event.
The merged prop renders all fields in a single connected group with shared elevation and border radius. Fields are joined visually without gaps between them.
The pattern prop restricts which characters are accepted. It supports preset values (numeric, alpha, alphanumeric, unicode-alpha, unicode-alphanumeric) or a custom RegExp. When type="number" is set, the pattern defaults to numeric automatically. Use the unicode-* variants to accept non-Latin scripts such as CJK, Cyrillic or accented characters.
The divider prop renders a simple text character between every field.
The divider slot allows you to customize the separator content between fields. It receives the divider index as a slot prop.
The following are a collection of examples that demonstrate more advanced and real world use of the v-otp-input component.
The following example is a detailed example of a v-otp-input component used within a card.
The following example is a detailed example of a v-otp-input component used with mobile text.
The following example is a detailed example of a v-otp-input component used to verify a user's account.
Using the v-otp-field, v-otp-group, and v-otp-separator sub-components inside the #fields slot, you can build custom layouts. Groups can be individually merged, and separators accept any content through their default slot.