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:

1npm i vue3-otp-input-field

OR

1yarn add vue3-otp-input-field

OR

Without Build Tools

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

Usage

In your desired component add the OTP component with required props

1<script setup>
2import { ref } from "vue";
3import { OTP } from "vue3-otp-input-field";
4
5function logOtpValue(val = []) {
6  code.value = val;
7}
8const code = ref([]);
9const fieldSize = ref(6);
10
11function handleSubmit() {
12  console.log(code.value);
13}
14</script>
15
16<template>
17  <OTP
18    size="medium"
19    :fields="fieldSize"
20    inputstyle="width: 80px; height: 50px; font-size: 40px; margin: 3px; border-radius: 5px;"
21    type="mix"
22    className="example-class-name"
23    @OTPValueChanged="logOtpValue"
24  />
25
26  <div class="card">
27    <button type="button" @click="handleSubmit">Submit</button>
28  </div>
29  <h1>{{ code }}</h1>
30</template>
31
32<style scoped></style>
33

Props parameters

Prop/Attribute	Type	Description
size	string	Size of the OTP component ("small", "medium", "large")
:fields	number	Specify the number of input box
inputstyle	string	Styles applied to each input field (CSS inline styles)
type	string	Type of OTP ("number", "mix")
className	string	Additional class name(s) for styling or customization
@OTPValueChanged	function	Event handler for OTP value change (Vue.js event binding). Its a Emit function

Contribute

Contributions are always welcome!