@bachdgvn/vue-otp-input

vue-otp-input

A fully customizable, OTP(one-time password) input component built with Vue 2.x.

Live Demo

Installation

To install the latest stable version:

npm install --save @bachdgvn/vue-otp-input

Basic usage:

import OtpInput from "@bachdgvn/vue-otp-input";

Vue.component("v-otp-input", OtpInput);

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

<script>
export default {
  methods: {
    handleOnComplete(value) {
      console.log("OTP: ", value);
    }
  }
};
</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);
  textalign: "center";

  &.error {
    border: 1px solid red !important;
  }
}
</style>

Props

Name	Type	Required	Default	Description
num-inputs	number	true	4	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.
should-auto-focus	boolean	false	false	Auto focuses input on inital page load.
is-input-num	boolean	false	false	Restrict input to only numbers.

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.

Changelog

• v1.0.2 - Update first stable version.
• v1.0.3 - Fix #1: Fist and last character not being modified and pasting OTP codes.
• v1.0.4 - Support @on-change event and fix bug for firing @on-complete every time we press keyboard.