vue3-otp-input-field

Vue-Vite 3 OTP Input Field

Customizable OTP input field component for Vue 3 Vite.

Recommended to use with Vue Vite. Because Vue(without Vite) does not accept the emit funcitons as node package.

Preview

Demo

Demo link

Installation

To install:

npm i vue3-otp-input-field

OR

yarn add vue3-otp-input-field

OR

Without Build Tools

<script src="https://unpkg.com/vue3-otp-input-field"></script>

Usage

In your desired component add the OTP component with required props

<script setup>
import { ref } from "vue";
import { OTP } from "vue3-otp-input-field";

function logOtpValue(val = []) {
  code.value = val;
}
const code = ref([]);
const fieldSize = ref(6);

function handleSubmit() {
  console.log(code.value);
}
</script>

<template>
  <OTP
    size="medium"
    :fields="fieldSize"
    inputstyle="width: 80px; height: 50px; font-size: 40px; margin: 3px; border-radius: 5px;"
    type="mix"
    className="example-class-name"
    @OTPValueChanged="logOtpValue"
  />

  <div class="card">
    <button type="button" @click="handleSubmit">Submit</button>
  </div>
  <h1>{{ code }}</h1>
</template>

<style scoped></style>

Props parameters

Contribute

Contributions are always welcome!