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