Accessible Unstyled One-time Password Input Component – vue-input-otp

An accessible, unstyled, customizable OTP(one-time password) input component inspired by React input-otp.

How to use it:

1. Import the OTP Input component into your Vue project.

<script setup lang="ts">
  import { OTPInput } from 'vue-input-otp'
  import Slot from './Slot.vue'

2. Add the OTP Input component to your web form.

    <OTPInput v-slot="{ slots }" :maxlength="4">
      <!-- slots here -->

3. More component props.

inputmode: 'numeric', // numeric, text
autocomplete: 'one-time-code',
textAlign: 'left', // left, right, center

4. Events.

  • @complete(value): Emitted when the input is complete


Accessible Unstyled One-time Password Input ComponentChangelog:

v0.1.0 (03/08/2024)

  • Update

Download Details:

Author: wobsoriano

Live Demo:

Download Link:

Official Website:

Install & Download:

$ npm install vue-input-otp

Add Comment