vue3-pincode-otp

Pincode input component for Vue 3 Live demo

Table of Contents

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

Demo

Demo on GitHub Pages

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';

<VuePincodeOtp v-model="pincode" />

Also can use your class for custom component See more props

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

Events

Note: The v-model is updated when the pin is still being filled in and when it is already completed and edited. But the v-model stops updating when the pincode is completed and one of the fields is cleared, so you can use @pincodeInputUpdate and @pincodeInputIncomplete events to watch for changes.

Authors && Contributors

• siriphonnot
• drakoan

License

The MIT License