SnapOTP jQuery Plugin

SnapOTP jQuery is a lightweight and modern OTP input field plugin that supports customizable styles and JavaScript callbacks. It's ideal for login verification, signup, or 2FA processes.

🧪 Live Demos

Box Style OTP


$('#otp-boxed').snapOTP({
  length: 6,
  style: 'box',
  onComplete: function(otp) {
    console.log('OTP entered:', otp);
  }
});

Circle Style OTP


$('#otp-circular').snapOTP({
  length: 6,
  style: 'circle',
  onComplete: function(otp) {
    console.log('OTP entered:', otp);
  }
});

Underline Style OTP


$('#otp-underlined').snapOTP({
  length: 6,
  style: 'underline',
  onComplete: function(otp) {
    console.log('OTP entered:', otp);
  }
});

📘 How to Use SnapOTP

Include jQuery and the SnapOTP plugin:


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="dist/snapotp.css" />
<script src="dist/snapotp.js"></script>

Basic Initialization:


$('#otp-container').snapOTP({
  digits: 6,
  style: 'box',
  type: 'text',
  inputClass: 'my-input-class',
  containerClass: 'my-container-class',
  onComplete: function(code) {
    console.log('Completed OTP:', code);
  },
  onChange: function(code) {
    console.log('OTP changed:', code);
  },
  onEnter: function(code) {
    console.log('Enter pressed. Current OTP:', code);
  }
});

Available Styles:

Keyboard Features:

📦 Installation

npm install snapotp-jquery

🔌 Basic Usage

<div id="otp-boxed"></div>

<script>
  $('#otp-boxed').snapOTP({
    digits: 6,
    style: 'box',
    onComplete: function(otp) {
      console.log('OTP entered:', otp);
    }
  });
</script>

⚙️ Configuration Options

Option Type Default Description
digits Number 6 How many input boxes to show.
type String 'text' Input type. Options: 'text', 'number', 'tel', etc.
style String 'box' Choose between box, circle, or underline input styles.
onComplete Function () => {} Fires when all digits are entered.
onChange Function () => {} Fires every time the input value changes.
onEnter Function () => {} Fires when user presses Enter key.
inputClass String '' Custom class for each input field.
containerClass String '' Custom class for the container div.

🔄 Resetting the OTP

To clear and reset the input fields, use the following:

$('#otp-boxed').resetSnapOTP();

🔄 GET the Value

To get value programmatically, use the following:

let otp = $('#otp-boxed').getValue();

👨‍💻 Author

Nitin Ram Rathod
Full-stack JavaScript Developer
Creator of SnapOTP
Connect via GitHub or LinkedIn