vue3-otp-input

Vue 3 OTP Input is a 5.0 KB fully customizable OTP (one-time password) input component for OTPs, transaction pins, and passwords built with Vue 3.x and Vue Composition API..

📹 Demo

⚙️ Installation

To install the latest stable version:

npm i vue3-otp-input

OR

yarn add vue3-otp-input

OR

Without Build Tools

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

📖 Usage

1/3. Register as a Vue component locally OR

<script>
// Import in a Vue component
import VOtpInput from 'vue3-otp-input';

export default defineComponent({
  name: 'App',
  components: {
    VOtpInput,
  },
  setup() {
    const otpInput = ref(null)

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

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

     const clearInput = () => {
      otpInput.value.clearInput()
    }

    return { handleOnComplete, handleOnChange, clearInput, otpInput };
  },
});
</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"
      separator="-"
      :num-inputs="4"
      :should-auto-focus="true"
      :is-input-num="true"
      :conditionalClass="['one', 'two', 'three', 'four']"
      :placeholder="['*', '*', '*', '*']"
      @on-change="handleOnChange"
      @on-complete="handleOnComplete"
    />
  </div>
  <button @click="clearInput()">Clear 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

Name	Type	Required	Default	Description
num-inputs	number	true	4	Number of OTP inputs to be rendered.
separator	component	false		Provide a custom separator between inputs by passing a component. For instance, <span>-</span> would add - between each input
input-classes	className (string)	false	none	Style applied or class passed to each input.
input-type	string	false	"tel"	Input type. Optional value: "password", "number", "tel", "letter-numeric".
inputmode	string	false	"numeric"	This allows a browser to display an appropriate virtual keyboard. Optional value: "numeric", "text", "tel". [Learn More](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)
should-auto-focus	boolean	false	false	Auto focuses input on inital page load.
placeholder	array	false	[]	Specify an expected value for each input. Example: :placeholder="['*', '*', '*', '*']". The length of this array should be equal to num-inputs.
conditionalClass	array	false	[]	Specify a class to be applied to each input based on the value of the input. Example: :conditionalClass="['one', 'two', 'three', 'four']". The length of this array should be equal to num-inputs.
is-disabled	boolean	false	false	Disables all the input fields.

🤺 Methods

Name	Description
clearInput()	Use with ref for clearing all otp inputs, see code example section.

🐴 Events

Name	Description
on-change	Return OTP code was changing when we made a change in inputs.
on-complete	Return OTP code typed in inputs.

🤟🏽 License

MIT

📓 Contributing

Contributions are always welcome!

See contributing.md for ways to get started.

Please adhere to this project's code of conduct.

🧸 Appendix

This component is a rewite of vue-otp-input component to support Vue 3.x. Feel free to use it in your project, report bugs and make PR 👏🏽.