vue3-pincode-input

Pincode input component for Vue 3 Live demo

Table of Contents

• Demo
• Features
• Usage
• Props
• Authors && Contributors
• License

Demo

Demo on GitHub Pages

Features

• Be lightweight, powerful and easy to use
• Support for add your custom class
• Override-friendly styles
• Configurable length (pincode length)
• Auto moving focus when filling
• Auto moving focus when deleting
• Call for native numeric keyboard on mobile
• Optional secure mode (password input type)
• Can add class for pincode input
• Can add success class of pincode input
• Support Vue 3 only

Usage

  npm i vue3-pincode-input

or with yarn

  yarn add vue3-pincode-input

Import for use component:

import VuePincodeInput from 'vue3-pincode-input';

<VuePincodeInput v-model="pincode" />

Also can use your class for custom component See more props

<VuePincodeInput
  v-model="pincode"
  input-class="rounded-full w-18 h-18 text-3xl text-gray-500 border-2 border-gray-200 shadow"
  success-class="border-2 border-green-400"
  spacing-class="mr-2"
  autofocus
/>

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 input
}
<style>

Props

Authors && Contributors

• siriphonnot

License

The MIT License