vue3-otp-input

Documentation

📹 Demo

⚙️ Installation

Install as package

pnpm i vue3-otp-input

Install via CDN

<script src="https://unpkg.com/vue3-otp-input"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-otp-input"></script>

📖 Usage Demo

1/3. Register as a Vue component locally OR

<script setup lang="ts">
import { ref } from "vue";
import VOtpInput from "vue3-otp-input";
const otpInput = ref<InstanceType<typeof VOtpInput> | null>(null);
const bindModal = ref("");
const handleOnComplete = (value: string) => {
 console.log("OTP completed: ", value);
};
const handleOnChange = (value: string) => {
 console.log("OTP changed: ", value);
};
const clearInput = () => {
 otpInput.value?.clearInput();
};
const fillInput = (value: string) => {
 console.log(value);
 otpInput.value?.fillInput(value);
};
</script>

1/3. Register as a Vue component globally

// main.js or main.ts
import { createApp } from 'vue'
import App from './App.vue'
import VOtpInput from "vue3-otp-input";
const app = createApp(App)
app.component('v-otp-input', VOtpInput).mount('#app')

2/3. Use the registered component in your Vue template

<template>
 <div style="display: flex; flex-direction: row">
 <v-otp-input
 ref="otpInput"
 input-classes="otp-input"
 :conditionalClass="['one', 'two', 'three', 'four']"
 separator="-"
 inputType="letter-numeric"
 :num-inputs="4"
 v-model:value="bindValue"
 :should-auto-focus="true"
 :should-focus-order="true"
 @on-change="handleOnChange"
 @on-complete="handleOnComplete"
 :placeholder="['*', '*', '*', '*']"
 />
 </div>
 <button @click="clearInput()">Clear Input</button>
 <button @click="fillInput('2929')">Fill Input</button>
</template>

3/3 [Optional]. Some basic styling options

This css has to go into a <style> tag which does not have scoped attributed

<style>
.otp-input {
 width: 40px;
 height: 40px;
 padding: 5px;
 margin: 0 10px;
 font-size: 20px;
 border-radius: 4px;
 border: 1px solid rgba(0, 0, 0, 0.3);
 text-align: center;
}
/* Background colour of an input field with value */
.otp-input.is-complete {
 background-color: #e4e4e4;
}
.otp-input::-webkit-inner-spin-button,
.otp-input::-webkit-outer-spin-button {
 -webkit-appearance: none;
 margin: 0;
}
input::placeholder {
 font-size: 15px;
 text-align: center;
 font-weight: 600;
}
</style>

🍔 Props

🤺 Methods

🐴 Events

🤟🏽 License

📓 Contributing

🧸 Appendix