Configurable Pincode Input Component With JavaScript

Category: Form , Javascript | May 29, 2021
Views Total:4,414 views
Official Page:Go to website
Last Update:May 29, 2021


Configurable Pincode Input Component With JavaScript


A simple yet configurable Pincode input component to provide a cross-platform Pincode login experience for your web apps.

How to use it:

1. Install and import the Pincode input component.


$ npm i pincode-input
import PincodeInput from 'pincode-input'
import 'pincode-input/dist/pincode-input.min.css'

2. Or load the following files in the document.

<link rel="stylesheet" href="./dist/pincode-input.min.css" />
<script src="./dist/pincode-input.min.js"></script>

3. Create a container element for the Pincode input component.

<div class="pincode-input-container"></div>

4. Initialize the component and get the code value using the onInput function.

new PincodeInput('.pincode-input-container', {
    onInput: (value) => {

5. Determine whether to use password input. Default: false.

new PincodeInput('.pincode-input-container', {
    secure: true

6. Determine the number of code input to generate. Default: 4.

new PincodeInput('.pincode-input-container', {
    count: 6

7. Set the duration of the character preview when using password input. Default: 200.

new PincodeInput('.pincode-input-container', {
    previewDuration: 300


v0.4.2 (05/29/2021)

  • [BUGFIX] no longer allows more than 1 character for non-numeric inputs

You Might Be Interested In:

Leave a Reply