@j2only/pincode NPM

@j2only/pincode

npm bundle size (scoped) GitHub

Vue.js pincode input component. :lock: Written entirely on Vue 3 Composition API with Typescript and Vite. Compatible only with Vue.js 3.x.

Simple pincode input field
Minimal style
Customizable
Smooth animations
Optional keyboard input (with backspace and delete keys support)

You can check a DEMO HERE

Installation

Install this component via package manager:

yarn add @j2only/pincode

npm install --save @j2only/pincode

Usage

Import the component in your app and pass some settings:

<template>
    <vue-pincode
        name="pincode"
        ref="pincodeInput"
        :length="4"
        :releaseSuccess="true"
        :releaseSuccessDelay="2500"
        :releaseErrorDelay="500"
        :customButton="true"
        :keyboardInput="true"
        :focusRequired="true"
        :activeElement="activeEl"
        @clickButton="buttonFn"
        @clickCustomButton="cButtonFn"
        @pincode="checkPincode"
    />
</template>

<script setup lang="ts">
import VuePincode from "@j2only/pincode";

const pincodeInput = ref()
const cButtonFn = ref(() => alert("the custom button clicked!"))
const answer = "1234"
const activeEl = ref(document.body) as Ref<HTMLElement>

function checkPincode(pincode: string) {
    setTimeout(() => {
        if (pincode === answer)
            pincodeInput.value.triggerSuccess()
        else
            pincodeInput.value.triggerMiss()
    }, 300)
}
</script>

Props

As you can see, the component accepts some props:

Prop	Type	Default	Description
name	String	"pincode"	Unique ID, in case of using several components on one page
length	Number	4	Required pincode length, minimum 2, maximum 8
releaseSuccess	Boolean	true	Reset state after delay when entered pincode is correct
releaseSuccessDelay	Number	2500	Delay to reset state after entered pincode is correct (milliseconds)
releaseErrorDelay	Number	500	Delay to reset state after entered pincode is invalid (milliseconds)
customButton	Boolean	false	Show custom button
keyboardInput	Boolean	true	Dynamic prop for keyboard input capability
focusRequired	Boolean	false	Enable keyboard input only if vue-pincode if focused
activeElement	Object	document.body	Default focused HTML element with vue-pincode, use if component placed on modal or something similar

CSS Variables

Also, you can customize some styles via CSS Variables:

Variable	Default	Description
--pc-color-button	#010101	Color of digits
--pc-color-button-pressed	#474747	Color of pressed digit
--pc-color-button-bg	#f6f6f6	Color of digits background
--pc-color-button-bg-pressed	#eaeaea	Color of pressed digit background
--pc-color-field-normal	#234567	Color of fields
--pc-color-field-success	#42b983	Color of fields when pincode is correct
--pc-color-field-error	#eb0c0c	Color of fields when pincode is invalid
--pc-custom-button-icon	base64 string	Custom button icon

Events

Event	Description
pincode	Is triggered when the entered pincode length is equal to length prop
clickButton	Is triggered when the some of digit buttons is pressed
clickCustomButton	Is triggered when the custom button is pressed