Installation

How to use

To install the latest stable version:

npm i @jaybharadia/otp-input-vue

• Import plugin

import OtpInput from "@jaybharadia/otp-input-vue";

• Use plugin

import Vue from "vue";
Vue.use(OtpInput);

• Import css

import "@jaybharadia/otp-input-vue/dist/vue-otp-input.css";

<template>
  <div>
    <otp-input
      :isValid="isCodeValid"
      @on-complete="onCompleteHandler"
      @on-changed="onChangedHandler"
      @on-paste="onPasteHandler"
    >
      <template #errorMessage> There is an error </template>
    </otp-input>
  </div>
</template>

<script>
  export default {
    name: "yourComponent",
    data() {
      return {
        isCodeValid: true,
      };
    },
    methods: {
      onCompleteHandler(code) {
        console.log("code completed", code);
        this.isCodeValid = false;
      },

      onChangedHandler(lastEnteredCode) {
        console.log("code changed", lastEnteredCode);
        this.isCodeValid = true;
      },

      onPasteHandler(code) {
        console.log("code pasted", code);
      },
    },
  };
</script>

Expected output :

Key Features

• Reset OTP State ( Additional Feature in this package )

• [x] Dynamic display modes - Group and Separate

• [x] Fully customizable style - Input , wrapper , Active Input, Errors

• [x] Direction of inputs - RTL / LTR

• [x] Dynamic Type - Number and Text

• [x] Reset Otp State

• [x] Dynamic Number of inputs

• [x] Your desired character as input placeholder

• [x] Controllable gap between inputs

• [x] Disabled inputs

• [x] Error handling - with customizable text

• [x] Auto Focus on inputs

• [x] Password input type

• [ ] web-otp - auto fill input from sms (Coming soon ... )

• [ ] Vue 3.x - compatible with vue 3.x (Coming soon ... )

Props

Note Don't Panic! 😁 There is a guide to how use class props and style inputs as you wish, see this guide.

Events

Instance Methods ( $vueOtpInput )

Styling

To customize the appearance of the inputs, we can pass our classes to the component as props:

First we should know how to pass class to otp component and use it . there is several approach, we focus on scoped CSS with deep selector (you can do yours😉) :

template :

<template>
  <otp-input
    separateWrapperClass="separate-wrapper-class"
    separateInputClass="separate-input-class"
  />
</template>

css :

<style scoped>
 .vue-otp-input  >>>  .separate-input-class {
	text-align: center;
	font-weight: bold;
	font-size: 20px;
	background-color: aquamarine;
	color: blue;
	border: solid  2px  red;
	width: 48px;
	height: 48px;
 }

.vue-otp-input  >>>  .separate-wrapper-class {
	border: solid  3px  green;
}
</style>

output:

template :

<template>
  <otp-input
    mode="group"
    groupWrapperClass="group-wrapper-class"
    groupInputClass="group-input-class"
  />
</template>

css :

<style scoped>
.vue-otp-input  >>>  .group-wrapper-class {
	border: solid  3px  green;
	background-color: blue;
}

.vue-otp-input  >>>  .group-input-class {
	background-color: blue;
	border: none;
	text-align: center;
	font-weight: bold;
	font-size: 20px;
	color: #fff;
	width: 48px;
	height: 48px;
}
</style>

output :

template :

<template>
  <otp-input :isValid="false" errorClass="error-class">
    <template #errorMessage> There is an error </template>
  </otp-input>
</template>

css :

<style scoped>

.vue-otp-input  >>>  .error-class {
	color: #66ff00;
	line-height: 1.5em;
	font-weight: bold;
}
</style>

output :

<template>
  <otp-input activeInputClass="active-input-class"> </otp-input>
</template>

css :

<style scoped>

.vue-otp-input  >>>  .active-input-class {
	text-align: center;
	border-color: red  !important;
	transform: scale(1.2);
}
</style>

output :

or in group mode with activeWrapperClass prop :

Contribute

You can help me and contribute for :

• New options

• Bug Fix

• Better exceptions

License

MIT