vue3-pincode-input
Pincode input component for Vue 3 Live demo
Table of Contents
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
| Name | Type | Default | Description |
|---|---|---|---|
| digits | Number | 4 | length of pincode |
| autofocus | Boolean | true | auto focus first input |
| placeholder | String | placeholder pincode input | |
| secure | Boolean | false | password input type |
| inputClass | String | class for pincode input | |
| successClass | String | class for pincode input success | |
| spacingClass | String | class for spacing between input |