vue-otp-box

Simple but amazing one-time password input component for the web as well as mobile with Vue 2.x.

Installation

npm i vue-otp-box

How to use it

<template>
  <div>
    //Example
    <vue-otp-box
      :numberOfBoxes="4"
      color="orange"
      position="center"
      @inputValue="inputValue"
    ></vue-otp-box>
  </div>
</template>

<script>
 import VueOtpBox from "vue-otp-box";
 import "vue-otp-box/dist/VueOtpBox.css";

export default {
  components: {
    VueOtpBox
  },

  data() {
    return {
      otp: undefined,
    };
  },

  methods: {
    inputValue(otp) {
      this.otp = otp;
    }
  }
};
</script>

Props

Prop Name	Type	Default Value	Value
numberOfBoxes	Number	4	4 or 6 is recommended
color	String	java (#26a69a)	Any color will work
position	String	center	"left", "right", "center"

Event

Name	Description
@inputValue	gets you the otp code of the input.