Key Features

• [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] 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 ... )

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.

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