OTP input logo

OTP input

Published January 2025
   •    Updated June 2025

Plugin details

The OTP Input Element is an advanced input component designed to streamline the process of entering and verifying one-time passwords (OTPs). This feature-rich element dynamically generates input fields based on the desired OTP length, ensuring flexibility and seamless integration into any application. The standout functionality of this element is its integration with the WebOTP API, enabling automatic OTP retrieval and autofill directly from SMS messages. With this cutting-edge feature, users experience a frictionless verification process, as the input fields are populated automatically without manual entry. Additionally, the element offers intuitive navigation between fields, robust error handling, and customizable styling, making it a versatile and user-friendly solution for modern authentication workflows.

$10

One time  •  Or  $2/mo

stars   •   0 ratings
1 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Chakor logo
Chakor
Joined 2021   •   371 Plugins
View contributor profile

Instructions

Instructions for Using the OTP Input Element
This OTP Input Element simplifies OTP entry with autofill support using the WebOTP API.


1. Place the Element  
  Add the OTP Input Element to the desired page in your application.

2. Set OTP Length
  Configure the `otp_length` property to match the number of OTP digits (e.g., 4, 6). Defaults to 6 if not set.

3. Send OTP via SMS
  - You must set up an SMS service(e.g., Twilio, AWS SNS) to send OTPs.  
  - Format your SMS as:  
   ```
  Your verification code for example.com is: 123456
    ``
    Replace `example.com` with your app's domain.

4. WebOTP Autofill
  - The WebOTP API automatically fills the OTP fields when a compatible SMS arrives.
  - Ensure your app is on HTTPS and the domain matches the SMS.

5. Manual Entry
  Users can type the OTP manually. Input fields support seamless navigation:

6. Troubleshooting  
  - Verify SMS format and domain for WebOTP autofill.
  - Ensure the `otp_length` matches the OTP sent.

This element handles OTP input and autofill only. Setting up SMS delivery is your responsibility.

Editor link : https://bubble.io/page?id=chakor-plugin-demo-6&tab=Design&name=otp_input&type=page

Types

This plugin can be found under the following types:

Categories

This plugin can be found under the following categories:

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble