Skip to main content

​
Usage

The VOtpInput component creates individual input fields for each character of a one-time password. 
<template>
  <v-otp-input v-model="otp" />
</template>

<script setup>
import { ref } from 'vue'
const otp = ref('')
</script>

​
Custom Length

Change the number of input fields: 
<template>
  <v-otp-input
    v-model="otp"
    length="4"
  />
</template>

​
With Divider

Add separators between input fields: 
<template>
  <v-otp-input
    v-model="otp"
    divider="-"
  />
</template>

​
Masked Input

Hide the entered values: 
<template>
  <v-otp-input
    v-model="otp"
    masked
  />
</template>

​
Text Type

Accept alphabetic characters: 
<template>
  <v-otp-input
    v-model="otp"
    type="text"
  />
</template>

​
Loading State

Show a loading indicator: 
<template>
  <v-otp-input
    v-model="otp"
    loading
  />
</template>

​
Custom Styling

Customize the appearance: 
<template>
  <v-otp-input
    v-model="otp"
    variant="outlined"
    color="primary"
    bg-color="surface"
  />
</template>

​
Props

​
modelValue
number | string
The v-model value of the component
​
length
number | string
default:"6"
The number of OTP input fields to display
​
type
'text' | 'password' | 'number'
default:"number"
The input type for the fields
​
masked
boolean
default:"false"
Masks the input values similar to a password field
​
divider
string
Text or symbol to display between input fields
​
placeholder
string
Placeholder text for empty input fields
​
autofocus
boolean
default:"false"
Automatically focuses the first input field on mount
​
focusAll
boolean
default:"false"
Applies focused styling to all input fields when any field is focused
​
disabled
boolean
default:"false"
Disables all input fields
​
loading
boolean | string
Displays a loading overlay. Pass a color string to customize the loader
​
error
boolean
default:"false"
Puts the input in an error state
​
variant
'outlined' | 'filled' | 'solo' | 'plain' | 'underlined'
default:"outlined"
Visual variant of the input fields
​
color
string
Applies specified color to the inputs when focused
​
baseColor
string
Base color applied to the inputs
​
bgColor
string
Background color of the input fields
​
rounded
string | number | boolean
Border radius applied to the input fields
​
density
'default' | 'comfortable' | 'compact'
Adjusts the vertical spacing
​
width
string | number
Sets the width of the component
​
height
string | number
Sets the height of the component
​
label
string
default:"$vuetify.input.otp"
Aria-label for the input fields (supports i18n)

​
Slots

​
default
slot
The default slot for additional content
​
loader
slot
Slot to customize the loading indicator

​
Events

​
update:modelValue
event
Emitted when the OTP value changes
​
finish
event
Emitted when all input fields are filled
​
update:focused
event
Emitted when focus state changes

​
Methods

​
focus()
method
Focuses the first input field
​
blur()
method
Blurs all input fields
​
reset()
method
Clears all input values
The component automatically handles paste events, allowing users to paste the complete OTP code which will be distributed across all fields.
Keyboard navigation is fully supported with arrow keys to move between fields and backspace to delete and move to the previous field.

Build docs developers (and LLMs) love

Get started for freeTalk to us