Great pincode input component for Vue.js applications.


  • 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)


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


  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">

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

div.vue-pincode-input-wrapper {
  // any styles you want for wrapper

input.vue-pincode-input {
  // any styles you want for each cell


  • 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


  • 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