Customizable One-time Password Input Component – vue-otp-input

Install & Download:

# Yarn
$ yarn add @bachdgvn/vue-otp-input
# NPM
$ npm install @bachdgvn/vue-otp-input --save

Description:

vue-otp-input is a customizable, user-friendly one-time password (pin code) input component for Vue.js 2+ applications.

How to use it:

1. Import and register the componnet.

import VieOtpInput from "@bachdgvn/vue-otp-input";
Vue.component("vie-otp-input", VieOtpInput);

2. Insert the component in the template.

<template>
  <div>
    <vie-otp-input
      inputClasses="otp-input"
      :numInputs="4"
       separator="-"
      :shouldAutoFocus="true"
      @on-complete="handleOnComplete"
    />
  </div>
</template>

export default {
  name: 'App',
  components: {
    'vie-otp-input': VieOtpInput,
  },
  methods: {
    handleOnComplete(value) {
      console.log('OTP: ', value);
    },
  },
};

3. Apply your own styles to the one-time password input.

.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);
  textalign: "center";
}
.otp-input.error {
  border: 1px solid red !important;
}

4. Default props.

numInputs: {
  default: 4,
},
separator: {
  type: String,
  default: '**',
},
inputClasses: {
  type: String,
},
isInputNum: {
  type: Boolean,
},
shouldAutoFocus: {
  type: Boolean,
  default: false,
}