trendingtechnology/vue-pincode-input

Great pincode input component

vue-pincode-input

Great pincode input component for Vue.js applications.

Demo on GitHub Pages

Features

• configurable length (symbols count)
• override-friendly styles
• auto moving focus when filling
• auto moving focus when deleting
• auto selecting cell content on focusing
• call for native numeric keyboard on mobiles
• optional secure mode (password input type)
• character preview on typing (configurable duration)

Attention!

Styles that component have are written just for demo. But that styles are override-friendly, so you can write any styles you want.

Usage

  npm i --save vue-pincode-input

or with yarn

  yarn add vue-pincode-input

Then in any component:

import PincodeInput from 'vue-pincode-input';
// The name can be different depending on your desire

<div class="input-wrapper">
  <PincodeInput
    v-model="code"
    placeholder="0"
  />
</div>

Attention: you should use 'input.vue-pincode-input' instead '.vue-pincode-input' in order to rule specificity was higher

<style>
div.vue-pincode-input-wrapper {
  // any styles you want for wrapper
}

input.vue-pincode-input {
  // any styles you want for each cell
}
<style>

Props

• length (symbols count)

  • type: Number
  • default: 4

• autofocus (auto focus first cell)

  • type: Boolean
  • default: true

• secure (password input type)

  • type: Boolean
  • default: false

• characterPreview (preview character on typing)

  • type: Boolean
  • default: true

• previewDuration (duration of character preview)

  • type: Number
  • default: 300

ToDo

• configure husky
• write unit tests for v0.1.0 (secure prop)
• write unit tests for v0.2.0 (characterPreview and previewDuration props)
• write unit tests for pasting data