Mobile-first Configurable Pin Code Input Component

A configurable, mobile-first pin code component for security code & password input.

More Features:

• Auto move focus when filling/removing.
• Auto select Pincode input on focus.
• Auto call for the native numeric keyboard on mobile devices.

How to use it:

1. Install and import the pin code input component.

import PincodeInput from 'vue-pincode-input';

2. Create a pin code input component in your app template.

<PincodeInput
  v-model="code"
  placeholder="0"
/>

3. Register the component and done.

export default Vue.extend({
  name: 'App',
  components: {
    PincodeInput,
  },
  data: () => ({
    code: '',
  }),
});

4. Determine whether or not to enable the auto focus on page load. Default: true.

<PincodeInput
  v-model="code"
  placeholder="0"
  :autofocus=false
/>

5. Determine the length of the pin code input. Default: 4.

<PincodeInput
  v-model="code"
  placeholder="0"
  :length="2"
/>

Preview:

Changelog:

v0.3.0 (07/31/2020)

• Fixed: Fields not cleaning when I set v-model as null or ”

Download Details:

Author: Seokky

Live Demo: https://seokky.github.io/vue-pincode-input/

Download Link: https://github.com/Seokky/vue-pincode-input/archive/master.zip

Official Website: https://github.com/Seokky/vue-pincode-input

Install & Download:

# Yarn
$ yarn add vue-pincode-input

# NPM
$ npm install vue-pincode-input --save