📹 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>

📖 UsageDemo

1/3. Register as a Vue component locally OR

<scriptsetuplang="ts">import{ref}from"vue";importVOtpInputfrom"vue3-otp-input";constotpInput=ref<InstanceType<typeofVOtpInput>|null>(null);constbindModal=ref("");consthandleOnComplete=(value:string)=>{console.log("OTP completed: ",value);};consthandleOnChange=(value:string)=>{console.log("OTP changed: ",value);};constclearInput=()=>{otpInput.value?.clearInput();};constfillInput=(value:string)=>{console.log(value);otpInput.value?.fillInput(value);};</script>

1/3. Register as a Vue component globally

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

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

<template><divstyle="display: flex; flex-direction: row"><v-otp-inputref="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:010px;font-size:20px;border-radius:4px;border:1px solidrgba(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