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.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…