Skip to content

novaday-co/otp-input-vue

Repository files navigation


vue-logo
OTP-INPUT

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

stars license forks issues


Key FeaturesInstallationPropsEventsStylingContribute License


otp-input.gif


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

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>
	import  OtpInput  from  "otp-input-vue2";

	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 :


otp-input-error

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

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:

Screenshot-2022-08-12-181410

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 :

Screenshot-2022-08-12-182437


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 :

Screenshot-2022-08-12-205308


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 :

Screenshot-2022-08-12-215955

or in group mode with activeWrapperClass prop :

Screenshot-2022-08-12-220828



Contribute

You can help me and contribute for :

  • New options

  • Bug Fix

  • Better exceptions

License

MIT

About

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

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •