@jaybharadia/otp-input-vue

OTP-INPUT

This repository is a fork from this repository

Fully customizable OTP input for web apps, compatible with Vue 2.x

Key Features • Installation • Props • Events • Styling • Contribute • License

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";

---

Basic Example :

just import to your component :

<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

Name	Type	Default	Description
id	String	"otp"	Id of opt input when you have multiple otp-inputs in a page.
digits	Number	5	Number of OTP inputs to be rendered.
mode	String	"separate"	Way of showing opt input, options: separate , group
type	String	"number"	Type of input data , options : number, text, password
placeholder	String	"-"	Placeholder of inputs where data places
radius	Number	5	Border radius of inputs (in both modes)
gap	Number	10	Gap between inputs (in both modes)
isDisabled	Boolean	false	Whether the input are Disabled or not
isValid	Boolean	true	Whether the entered value is valid or not
rtl	Boolean	false	Whether the input is RTL or not
autoFocus	Boolean	true	The input should be focused-on when page rendered or not
separateInputClass	String	-	Single input class in separate mode
separateWrapperClass	String	-	Inputs wrapper class in separate mode
groupInputClass	String	-	Single input class in group mode
groupWrapperClass	String	-	Inputs wrapper class in group mode
activeInputClass	String	-	Style of single input when its focused
activeWrapperClass	String	-	Style of inputs wrapper when its focused on one input

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

Events

Name	Description
on-complete	Return OTP value typed in inputs when all digits are completed
on-changed	Return Last single OTP value in inputs after typing
on-paste	its triggered when paste value in inputs

Instance Methods ( $vueOtpInput )

Name	Arguments	Return value	Description
resetOtp	-	-	To Reset the otp value. ( Available through global prototype $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😉) :

Separate Mode :

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:

Group Mode :

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 :

---

Error Message :

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 :

Active input (focus) :

template :

<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