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'
</script>

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

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

3. More component props.

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

4. Events.

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

Preview:

Accessible Unstyled One-time Password Input ComponentChangelog:

v0.1.0 (03/08/2024)

  • Update

Download Details:

Author: wobsoriano

Live Demo: https://vue-input-otp.vercel.app/

Download Link: https://github.com/wobsoriano/vue-input-otp/archive/refs/heads/main.zip

Official Website: https://github.com/wobsoriano/vue-input-otp/tree/main

Install & Download:

# NPM
$ npm install vue-input-otp

Add Comment