vue3-pincode-otp

> Pincode input component for Vue 3 Live demo

!vue3-pincode-otp

* ___Demo___
* ___Features___
* ___Usage___
* ___Props___
* ___Authors && Contributors___
* ___License___

Demo

Features

Valuable:
- Be lightweight, powerful, informative, and easy to use at developing
- Be usability for users
- Support Vue 3 only
- Call for native numeric keyboard on mobile

Styling:
- Support for add your custom class
- Override-friendly styles
- Can add class for pincode input
- Can add success class of pincode input

Configurable:
- Configurable length (pincode length)
- Optional secure mode (password input type)
- Сan assign id to DOM elements (useful for tests)
- Сan use several pin codes with unique ids on one page

Autofocus:
- Autofocus on mounted (configurable)
- Autoblur on complete (configurable)
- Auto moving focus when filling
- Auto moving focus when deleting (backspace - back, delete - forward)
- Moving focus by pressing the keyboard arrows
- Customizable autofocus to empty fields
- Customizable autofocus to first fields after completing pin (you can make the typing-game! :) )

Informational:
- transmission of all user input data (character and input location, full and incomplete pin)
- Input error event (not a number)
- event of completion and incompleteness

Usage



  npm i vue3-pincode-otp





or with yarn



  yarn add vue3-pincode-otp





Import for use component:



import VuePincodeOtp from 'vue3-pincode-otp';





Also can use your class for custom component See more props



  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

vue3-pincode-otp

vue3-pincode-otp

Table of Contents

Demo

Features

Usage