@8bu/vue-otp-input
TypeScript icon, indicating that this package has built-in type declarations

1.2.2 • Public • Published

Simple Vue OTP Style Input

GitHub Release GitHub Activity License BuyMeCoffee

Only support Vue.js 2.2.x+

Any polyfill error (missing functions...etc) can be fixed by import polyfill lib or config polyfill for webpack & babel. I removed all polyfill due to this recommend

alt text

Working demo

Installation

Global:

// main
import Vue from 'vue';
import OTPInput from '@8bu/vue-otp-input';
Vue.use(OTPInput);

Component:

<script>
import OTPInput from '@8bu/vue-otp-input';
import '@8bu/vue-otp-input/';
module.export = {
  name: 'you-component',
  components: {
    'otp-input': OTPInput,
  }
}
</script>

Usage

<template>
  <otp-input
    v-model="userToken"
    class="field-container"
    :length="6"
    pattern="[^0-9]+"
    :ignorePattern="false"
    fieldClass="custom-field-class"
    :size="32"
    @valid="isTokenComplete"
    disabled={false}
  />
</template>

Properties

v-model is supported by default.

Prop Type Required Default Description
class string Outer class container
length number/string ✔️ 4 Number of expected characters
pattern string [^0-9]+ Regex pattern of individual character input
ignorePattern boolean false Turn off character validation
fieldClass string Custom class for each input character
size number/string 16 Font size of input character (input size = 1.75 x font size).
disabled boolean false Working like native disabled
password boolean false Change all input type to password

Events

Name Param: Type Description
change value: string Return string result of user input
valid isValid: boolean Validate whenever user input to see if the input have been fully filled.

Limitation

Mobile devices may not have paste & backscape/delete feature. I'm working on another approach for this issue.

Change logs

From v1.2.0+, I will note some simple change log to keep track my changes.

1.2.1


  • Add submit event when user press Enter
  • Focus is now select a whole input field

1.2.0


  • Fix mobile input issue
  • Update new prop password for changing input type to password

Contributions are welcome!

If you want to contribute to this please read the Contribution guidelines


Dependents (0)

Package Sidebar

Install

npm i @8bu/vue-otp-input

Weekly Downloads

98

Version

1.2.2

License

MIT

Unpacked Size

317 kB

Total Files

13

Last publish

Collaborators

  • 8bu