Unstyled One-time Password Input In JavaScript – OTP Input

Preview:

Description:

OTP Input is a JavaScript library that makes it easy to integrate a user-friendly, unstyled one-time password input into web forms.

It works with a variety of JavaScript environments, including popular frameworks like Vue.js, and is ideal for applications requiring secure login, verification processes, or two-factor authentication (2FA).

How to use it:

1. Install and import the otp-input.

# NPM
$ npm install @rashidpathiiyil/otp-input

import OTP from '@rashidpathiyil/otp-input';

2. Code the HTML for the one-time password input.

<div class="otp-input-container">
  <input type="text" />
</div>
<!-- Results will be displayed here -->
<input class="otp-input-result" type="text" />

3. Initialize the OTP Input and done.

const initOTPInput = new OTP(
  elementOrSelector: string | HTMLElement, 
  updateToInput: string | HTMLInputElement | null = null, 
  resultRef: any | null = null
);