vue3-custom-otp-input v1.1.4

Vue3 Custom OTP Input

A Vue 3 component library for creating customizable OTP (One-Time Password) input fields.

Installation

You can install the library via npm or yarn.

Using npm

npm install vue3-custom-otp-input

Using yarn

yarn add vue3-custom-otp-input

Usage

Importing and Registering the Component

In your main entry file (e.g., main.ts), import and register the component globally:

import { createApp } from 'vue';
import App from './App.vue';
import OtpInput from 'vue3-custom-otp-input';

const app = createApp(App);
app.component('OtpInput', OtpInput);
app.mount('#app');

Using the Component in Your Templates

You can now use the OtpInput component in your Vue templates:

<template>
  <div>
    <OtpInput
      :numberOfInput="6"
      @onChange="handleChange"
      @onComplete="handleComplete"
      :inputStyles="{ borderColor: borderColor }"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import OtpInput from 'vue3-custom-otp-input';

const borderColor = ref('green');

const handleChange = (value: string) => {
  console.log('Current OTP value:', value);
};

const handleComplete = (value: string) => {
  console.log('OTP Complete:', value);
};
</script>

Props

Events

Customization

You can customize the appearance of the OTP input fields using the style prop. For example:

<OtpInput
  :numberOfInput="6"
  :inputStyles="{ borderColor: 'green', borderRadius: '50% !important' }"
/>