Great pincode input component for Vue.js

by Vue.js Examples

vue-pincode-input

Great pincode input component for Vue.js applications.

View Demo View Github

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

GitHub