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:


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:

  <div style="display: flex; flex-direction: row;">

    <button @click="handleClearInput()">Clear Input</button>
export default {
  name: 'App',

  methods: {
    handleOnComplete(value) {
      console.log('OTP completed: ', value);
    handleOnChange(value) {
      console.log('OTP changed: ', value);
    handleClearInput() {

<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-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;


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.


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


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.