OTP Input

The OTP input is used for MFA procedure of authenticating users by a one-time password.

Usage

Here we display a list of settings that could be applied within an application.


Installation

Labs components require a manual import and installation of the component.

src/plugins/vuetify.js
import { VOtpInput } from 'vuetify/labs/VOtpInput'

export default createVuetify({
  components: {
    VOtpInput,
  },
})

API

ComponentDescription
v-otp-inputPrimary Component

Anatomy

The v-otp-input component is a collection of v-fieldcomponents that combine to create a single input.

OTP input Anatomy

Element / AreaDescription
1. ContainerThe OTP input container holds a number of v-field components
2. FieldThe v-field component is used to create a single input field

Guide

Props

Dark theme

Applied dark theme, listen to value fill to affect button component.

Finish event

You can easily compose a loader to process the OTP input when completed insertion.

Hidden input

The entered value can be hidden with type="password"

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub