vue-otp-code-input

Vue 3 OTP / verification code input component. Zero dependencies, fully typed, with auto-focus, paste support, and multiple style variants.

Features

• Auto-focus next input on digit entry
• Full paste support (paste full code or partial, from any position)
• Backspace moves to previous input
• Arrow keys, Home, End navigation
• 3 style variants: outline, filled, underline
• 3 sizes: sm, md, lg
• Number-only or alphanumeric mode
• Password/masked mode
• Separator support (e.g. 123 - 456)
• Error state
• v-model support
• complete event when all digits filled
• Exposed focus(), clear(), getValue() methods
• Full TypeScript support
• Zero dependencies

Install

npm install vue-otp-code-input

Quick Start

<template>
  <OtpInput
    v-model="code"
    :length="6"
    autofocus
    @complete="onComplete"
  />
</template>

<script setup>
import { ref } from 'vue'
import { OtpInput } from 'vue-otp-code-input'
import 'vue-otp-code-input/style.css'

const code = ref('')

function onComplete(value) {
  console.log('Code entered:', value)
  // verify OTP...
}
</script>

Props

Prop	Type	Default	Description
modelValue	string	""	The OTP value (v-model)
length	number	6	Number of digits
type	"number" | "text" | "password"	"number"	Input type. number restricts to digits only
placeholder	string	""	Placeholder character for each box
disabled	boolean	false	Disable all inputs
readonly	boolean	false	Make inputs readonly
autofocus	boolean	false	Focus first input on mount
separator	string	""	Separator character (e.g. "-", ".")
separatorPosition	number[]	[]	Positions after which to show separator. Default: middle
error	boolean	false	Show error state
size	"sm" | "md" | "lg"	"md"	Input size
variant	"outline" | "filled" | "underline"	"outline"	Visual style
ariaLabel	string	"OTP"	Aria label prefix

Events

Event	Payload	Description
update:modelValue	string	Current value (v-model)
complete	string	Fired when all digits are filled
change	string	Fired on any change
focus	index, FocusEvent	Input focused
blur	index, FocusEvent	Input blurred

Exposed Methods

<template>
  <OtpInput ref="otpRef" v-model="code" />
  <button @click="otpRef?.clear()">Clear</button>
  <button @click="otpRef?.focus()">Focus</button>
</template>

<script setup>
import { ref } from 'vue'
import { OtpInput } from 'vue-otp-code-input'

const otpRef = ref()
const code = ref('')
</script>

Method	Description
focus(index?)	Focus input at index (default: 0)
clear()	Clear all digits and focus first input
getValue()	Get current value as string

Examples

4-digit PIN

<OtpInput v-model="pin" :length="4" size="lg" />

With separator

<OtpInput v-model="code" :length="6" separator="-" />

Custom separator position

<OtpInput v-model="code" :length="8" separator="-" :separator-position="[2, 5]" />

Filled style

<OtpInput v-model="code" variant="filled" />

Underline style

<OtpInput v-model="code" variant="underline" />

Password / masked

<OtpInput v-model="code" type="password" />

Alphanumeric

<OtpInput v-model="code" type="text" :length="5" />

With error state

<OtpInput v-model="code" :error="hasError" />
<span v-if="hasError" style="color: red">Invalid code</span>

With validation

<template>
  <OtpInput v-model="code" :error="!!error" @complete="verify" />
  <p v-if="error" style="color: red">{{ error }}</p>
</template>

<script setup>
import { ref } from 'vue'
import { OtpInput } from 'vue-otp-code-input'

const code = ref('')
const error = ref('')

async function verify(value) {
  try {
    await api.verifyOtp(value)
  } catch {
    error.value = 'Invalid verification code'
  }
}
</script>

Styling

Import default styles:

import 'vue-otp-code-input/style.css'

CSS classes for customization:

• .otp-container — wrapper
• .otp-input — individual input box
• .otp-input--focused — focused state
• .otp-input--filled — has a value
• .otp-input--error — error state
• .otp-separator — separator element
• .otp-outline / .otp-filled / .otp-underline — variant classes
• .otp-sm / .otp-md / .otp-lg — size classes

License

MIT