One-time Password Component For Vue 3 – otp-input

A highly customizable one-time password input (also called pincode input) component for Vue 3 applications.

How to use it:

1. Import and register the otp-input component.

// locally
import VOtpInput from 'vue3-otp-input';
export default defineComponent({
  components: {
    VOtpInput,
  },
});

// globally
import { createApp } from 'vue'
import App from './App.vue'
import VOtpInput from "vue3-otp-input";
const app = createApp(App)
app.component('v-otp-input', VOtpInput).mount('#app')

2. Add the v-otp-input component to the template.

<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"
/>

3. All default component props.

numInputs: {
  default: 4,
},
separator: {
  type: String,
  default: "**",
},
inputClasses: {
  type: String,
},
inputType: {
  type: String,
  validator: (value: string) =>
    ["number", "tel", "password"].includes(value),
},
shouldAutoFocus: {
  type: Boolean,
  default: false,
},
placeholder: {
  type: Array,
  default: [],
},
isDisabled: {
  type: Boolean,
  default: false,
},

Preview:

Changelog:

v0.3.6 (06/02/2022)

• bugfix

v0.3.5 (05/27/2022)

• bugfix

v0.3.4 (05/05/2022)

• Added type check for class array

v0.3.3 (05/03/2022)

• Added inputmode=numeric attribute

v0.3.2 (04/26/2022)

• fix extraneous non-emits event and props bug

v0.3.0 (04/25/2022)

• add default conditional class

v0.2.5 (03/06/2022)

• Update

v0.2.2 (01/11/2022)

• Update

v0.2.1 (01/03/2022)

• New feature: add two new props called ‘placeholder’ and ‘is-disabled’

v0.1.13 (12/12/2021)

• Update

Download Details:

Author: ejirocodes

Live Demo: https://github.com/ejirocodes/vue3-otp-input

Download Link: https://github.com/ejirocodes/vue3-otp-input/archive/refs/heads/main.zip

Official Website: https://github.com/ejirocodes/vue3-otp-input

Install & Download:

# NPM
$ npm i vue3-otp-input