OTP Input

A small one-time password input inspired by shadcn-vue, simplified for Nuxt auto-import and direct output events.

Installation

npx alixan-ui-nuxt add otp

Usage

Value: -

<script setup lang="ts">
const code = ref('')

const verify = (value: string) => {
  console.log('submit', value)
}
</script>

<template>
  <OtpInput v-model="code" :length="6" @submit="verify" />
</template>

Length

<template>
  <div class="grid gap-4">
    <OtpInput :length="4" />
    <OtpInput :length="8" />
  </div>
</template>

API Reference

Prop	Type	Default	Description
modelValue	string	''	OTP value used by v-model.
length	4 \| 5 \| 6 \| 7 \| 8	6	Number of OTP digits. Values are clamped between 4 and 8.

Event	Type	Description
@change	(value: string) => void	Emitted on every OTP value change.
@submit	(value: string) => void	Emitted when the OTP value reaches the selected length.