One Time Password Component

Vue 3 OTP is a 23kB lightweight fully customizable OTP (One Time Password) component for web apps, compatible with Vue (Vue 3) and Autofill one time code from email / sms.

The OTP component allows you to utilize two display modes (divided and group) with an adjustable number of inputs. You can either write your own styling or utilize predefined styles for all tags, including active/error classes. Additionally, you can choose of three types of inputs (number, text, password) and insert your own error messages.

Installation • Usage • Events • Props • Styling • Examples • Demo • License

Installation

npm i @altgr4m/vue3-one-time-password

or

yarn add @altg4m/vue3-one-time-password

Usage

1. Register (import) component into your app

a) Register locally

<script setup>
    import OneTimePassword from '@altgr4m/vue3-one-time-password'

    // You can utilize styles provided by the package
    // or customize them using own styling to suit your needs.
    // - Look at the "Styling" section bellow
    import "@altgr4m/vue3-one-time-password/style.css"
</script>

or

b) Register globally

//  main.js or main.ts

import OneTimePassword from "@altgr4m/vue3-one-time-password";
import "@altgr4m/vue3-one-time-password/style.css"

const app = createApp(App);
app.component('OneTimePassword', OneTimePassword)
app.mount('#app')

2. Basic usage

<template>
    <OneTimePassword/>
</template>

Events

Event Name	Description
@completed	Return string that represent OTP value typed in inputs when all digits are completed
@changed	Return string that represent OTP value when input changed
@paste	Triggered when paste value into OTP inputs
reset()	You can call reset function that resets input value (see bellow)

Events usage:

<template>
    <OneTimePassword
        @completed="onCompletedHandler"
        @changed="onChangedHandler"
        @paste="onPasteHandler"
        ref="otpComponent"
    />
    <button @click="resetOtp">Reset</button>
</template>

<script setup>
import {ref} from "vue";
import {OneTimePassword} from '@altgr4m/vue3-one-time-password'

const otpComponent = ref(null);

const onCompletedHandler = (token) => {
    console.debug("Completed", token);
    // write logic with completed code
};

const onChangedHandler = (token) => {
    console.debug("Token changed",  token);
    // write logic with changed code
};

const onPasteHandler = (token) => {
    console.debug("Token pasted", token);
    // write logic with pasted code
};

const resetOtp = () => {
    // reset input value if needed
    otpComponent.value.reset()
}
</script>

Props

Name	Type	Default	Options	Description
inputCount	Number	6	number	Number of OTP inputs to be rendered.
otpMode	String	"divided"	"divided", "group"	Change display of input, options: separate , group
inputType	String	"number"	"number", "text", "password"	Type of input data
placeholder	String	"-"	string	Placeholder of inputs where data places
borderRadius	String	"5px"	string	Border radius of inputs (in both modes)
inputsGapWidth	String	"10px"	string	Gap between inputs (in both modes)
isDisabled	Boolean	false	true, false	Whether the input are Disabled or not
isValid	Boolean	true	true, false	Whether the entered value is valid or not
reverseDirection	Boolean	false	true,false	Whether the input is RTL or not
isAutoFocus	Bool	true	true, false	The input should be focused-on when page rendered or not
hideCursor	Bool	false	true, false	The input cursor should be hidden on focus

Styling

You can use predefined styling (import bellow) or write custom css. Additionally, you can insert your own classes into component as props.

<script setup>
    import "@altgr4m/vue3-one-time-password/style.css"
</script>

Styling props:

Name	Type	Default	Options	Description
customWrapperClass	String	" "	string	Wrapper class
customInputClass	String	" "	string	Input class
customWrapperValidClass	String	"otp-wrapper-active"	string	Wrapper valid class
customWrapperErrorClass	String	"otp-wrapper-error"	string	Wrapper error class
customActiveInputClass	String	"otp-input-active"	string	Active input class (focused)

Example styling of component

<template>
    <OneTimePassword
	    customWrapperClass="class-styling-wrapper"
	    customInputClass="class-styling-inputs"
	    customWrapperValidClass="class-styling-wrapper-valid"
	    customWrapperErrorClass="class-styling-wrapper-error"
	    customActiveInputClass="class-styling-inputs-active"
    />
</template>
<style>
.otp-app .class-styling-wrapper {
    ...
 }
.otp-app .class-styling-inputs {
    ...
}
.otp-app .class-styling-wrapper-valid {
    ...
}
.otp-app .class-styling-wrapper-error {
    ...
}
.otp-app .class-styling-inputs-active {
    ...
}
</style>

Examples

Group Mode:

<template>
    <OneTimePassword otpMode="group"/>
</template>

Result:

---

Error Message:

<template>
    <OneTimePassword :isValid="false"  customWrapperErrorClass="wrapper-error-class">
        <p>Error message<p>
    </OneTimePassword>
</template>

<style>
.otp-app .wrapper-error-class {
    color: red;
    line-height: 1rem;
    font-size: 12px;
    text-align: left;
}
</style>

Result:

---

Divided password input, four digits, without placeholder

<template>
	 <OneTimePassword otpMode="divided" inputType="password" placeholder="" :inputCount="4" />
</template>

Result:

---

Focused (active) input:

<template>
	 <OneTimePassword customActiveInputClass="custom-input-active" />
</template>
<style>
.otp-app .custom-input-active {
	text-align: center;
	border: 1px solid green;
}
</style>

Result :

Demo

https://github.com/gramblicka/demo-vue3-one-time-password

License

MIT