MARKETPLACE
PLUGINS
NATIVE OTP INPUT FIELD
Native OTP Input Field logo

Native OTP Input Field

Published June 2026
   •    Updated this week

Plugin details

Native 4-digit OTP input with SMS autofill, auto-submit, and workflow events - for Bubble mobile apps. When an SMS code arrives, users can fill it with one tap: the plugin supports native SMS autofill on both iOS and Android. And the moment the last digit is entered, the "code completed" event fires - so you can verify instantly, no submit button needed.
Features:
1. 4-digit OTP entry with individual code cells and focus highlighting
2. Native numeric keypad opens automatically
3. One-tap SMS autofill (iOS and Android)
4. "Code completed" and "code changed" events for your workflows
5. Exposed states: value (the entered code) and is complete (yes/no)
6. Digit font, size, and color customizable via standard Font style settings
7. Cell size controlled by element height — no configuration needed

Free

For everyone

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

Other actions

Platform

Native mobile

Contributor details

GoldenAxe logo
GoldenAxe
Joined 2023   •   8 Plugins
View contributor profile

Instructions

How to use OTP Input (Mobile) 1. Add the element. Install the plugin, then drag OTP Input onto your mobile view. In the property editor, set Character Count (e.g., 6 for SMS codes) and Input Type — choose number for verification codes so users get the numeric keypad, or password to mask entry.
2. Style it. All visual options are under the STYLE section: box background, border color/width/radius, gap, focused colors, and the separator. Check Show Separator for a dash between boxes.
3. Capture the code. Add a workflow event: When OTP Input's completed — this fires the moment the user fills the last box. Read the code via OTP Input's value. Typical flow: When completed → Make changes / API call to verify code → navigate on success.
Use OTP Input's completed (yes/no) state in conditionals, e.g., only enable a "Verify" button when completed is yes. The changed event fires on every keystroke if you need live validation.
4. Reset after a failed attempt. Use the Reset a OTP Input action in a workflow (e.g., when verification fails) — it clears all boxes and refocuses the first one.
5. Disable while verifying. Bind the Disabled field to a dynamic yes/no (e.g., a custom state isVerifying) to lock input during the API call.
Tips

SMS autofill works automatically on real devices when the incoming SMS contains a code — test on BubbleGo or TestFlight, not web preview.
This plugin does not generate or verify codes; pair it with your backend (e.g., Twilio Verify via the API Connector).

Types

This plugin can be found under the following types:
Element   •   Event   •   Action

Categories

This plugin can be found under the following categories:
Data (things)   •   Technical   •   Productivity   •   Input Forms

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble