otp-input-vue2 v1.1.0

Key Features

• Dynamic display modes - Group and Separate

• Fully customizable style - Input , wrapper , Active Input, Errors

• Direction of inputs - RTL / LTR

• Dynamic Type - Number and Text

• Dynamic Number of inputs

• Your desired character as input placeholder

• Controllable gap between inputs

• Disabled inputs

• Error handling - with customizable text

• Auto Focus on inputs

• Password input type

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

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

Installation

To install the latest stable version:

npm i otp-input-vue2

	<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>
	import  OtpInput  from  "./components/OtpInput.vue";

	export default {
	name:"yourComponent",
	components:{
		OtpInput,
	},
	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 :

Props

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

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