vue-otp-input is a fully customizable OTP (one-time-password) input component built with Vue 2.x.
vue otp input codesandbox, one time password input html, vue verification code input, vue3 otp input, vue js otp authentication, bachdgvnvue otp input, v otp input, vue otp 2
Fully Customizable One Time Password OTP Component | ng-otp-input
How to make use of it:
Installation
npm install --save @bachdgvn/vue-otp-input
Import to main.js:
import OtpInput from "@bachdgvn/vue-otp-input";
Vue.component("v-otp-input", OtpInput);
Code example:
<template>
<div style="display: flex; flex-direction: row;">
<v-otp-input
ref="otpInput"
input-classes="otp-input"
separator="-"
:num-inputs="4"
:should-auto-focus="true"
:is-input-num="true"
@on-change="handleOnChange"
@on-complete="handleOnComplete"
/>
<button @click="handleClearInput()">Clear Input</button>
</div>
</template><script>
export default {
name: 'App',
methods: {
handleOnComplete(value) {
console.log('OTP completed: ', value);
},
handleOnChange(value) {
console.log('OTP changed: ', value);
},
handleClearInput() {
this.$refs.otpInput.clearInput();
},
},
};
</script>
<style lang="less">
.otp-input {
width: 40px;
height: 40px;
padding: 5px;
margin: 0 10px;
font-size: 20px;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.3);
text-align: center;
&.error {
border: 1px solid red !important;
}
}
.otp-input::-webkit-inner-spin-button,
.otp-input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
</style>Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| num-inputs | number | true | 4 | A number of OTP inputs to be rendered. |
| separator | component | false | Provide a custom separator between inputs by passing a component. For instance, <span>-</span> would add - between each input | |
| input-classes | className (string) | false | none | Style applied or class passed to each input. |
| input-type | string | false | “tel” | Input type. Optional value: “password”, “number”, “tel”. |
| should-auto-focus | boolean | false | false | Auto focuses input on initial page load. |
Methods
| Name | Description |
|---|---|
| clearInput() | Use with $refs for clearing all otp inputs, see code example section. |
Events
| Name | Description |
|---|---|
| on-change | Return OTP code was changing when we made a change in inputs. |
| on-complete | Return OTP code typed in inputs. |
One-time Password Input Component, vue-otp-input Plugin/Github
See Demo And Download
Official Website(bachdgvn): Click Here
This superior jQuery/javascript plugin is developed by bachdgvn. For extra advanced usage, please go to the official website.
