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

Install & Download:

# NPM
$ npm install vue-input-otp

Description:

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:

Changelog:

v0.1.0 (03/08/2024)

• Update