Press "Enter" to skip to content

A Fully Customizable One Time Password Input Component For The Web

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

NameTypeRequiredDefaultDescription
num-inputsnumbertrue4A number of OTP inputs to be rendered.
separatorcomponentfalse Provide a custom separator between inputs by passing a component. For instance, <span>-</span> would add - between each input
input-classesclassName (string)falsenoneStyle applied or class passed to each input.
input-typestringfalse“tel”Input type. Optional value: “password”, “number”, “tel”.
should-auto-focusbooleanfalsefalseAuto focuses input on initial page load.

Methods

NameDescription
clearInput()Use with $refs for clearing all otp inputs, see code example section.

Events

NameDescription
on-changeReturn OTP code was changing when we made a change in inputs.
on-completeReturn 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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.