OTPInput

OTPInput renders a configurable set of individual digit cells for one-time password entry, with auto-advance, backspace navigation, and paste support.

ExamplesCodeUsageChangelog

Basic usage

Value: —

Tailwind v4

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

<OTPInput v-model="otp" @complete="val => console.log('Done:', val)" />

Custom length

Tailwind v4

<OTPInput v-model="otp" :length="4" />

Password type

Tailwind v4

<OTPInput v-model="otp" type="password" />

Disabled

Tailwind v4

<OTPInput v-model="otp" :disabled="true" />

Props

Prop	Type	Default	Description
modelValue	string	—	Full OTP string (use with v-model)
length	number	6	Number of digit cells
disabled	boolean	false	Disables all cells
placeholder	string	'·'	Single character placeholder shown in empty cells
type	'text' | 'password' | 'number'	'text'	Input type for all cells

Events

Event	Payload	Description
update:modelValue	string	Emitted on every change
complete	string	Emitted when all cells are filled