MARKETPLACE
PLUGINS
NATIVE OTP INPUT
Native OTP Input logo

Native OTP Input

Published June 2026
   •    Updated this week

Plugin details

Native OTP Input is a customizable verification code input for Bubble mobile apps. It supports numeric or alphanumeric codes, paste handling, editable and strict entry modes, masking, grouped cells, validation states, focus actions, and completion events.
Key features:

- Numeric or alphanumeric OTP entry
- Configurable code length from 1 to 12 characters
- Editable, strict, and read-only modes
- Paste support for full or partial codes
- Optional auto focus
- Mask styles for private code entry
- Optional visibility toggle for masked codes
- Box, underline, and capsule cell styles
- Custom cell size, spacing, border, radius, colors, and typography
- Optional grouped formatting such as 3-3 or 2-2-2
- Right-to-left layout support
- Error, success, warning, and idle visual states
- Optional shake animation on error
- Screen reader progress announcements
- States for OTP value, completion status, digit count, focus status, and last pasted value
- Actions to set value, clear, focus, blur, and reveal/hide masked input

Demo page:
- https://bubbleaxis.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=otp

Editor page:
- https://bubble.io/page?id=bubbleaxis&app_type=mobile&tab=Design&name=otp&type=page

$10

One time

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

Platform

Native mobile

Contributor details

free Codex logo
free Codex
Joined 2023   •   23 Plugins
View contributor profile

Instructions

Add the Native OTP Input element to your mobile page and configure the code length to match the verification code your app expects.
Basic setup:

- Set Length to the number of characters required, such as 4, 6, or 8.
- Set Input mode to numeric for digit-only codes, or alphanumeric for codes that include letters.
- Use the Value field if you want to prefill or bind the OTP value to a Bubble state.
- Use the otp value state to read the current code entered by the user.
- Use the is complete state to know when the user has entered the full code.
- Run your verification workflow when the completed event is triggered.

Entry behavior:

- Use editable mode if users should be able to tap earlier cells and edit from that position.
- Use strict mode if users should only continue from the first empty cell.
- Use read only mode when you only want to display a code without opening the keyboard.
- Turn Allow paste on if users should be able to paste codes from SMS, email, or clipboard.
- Turn Auto focus on if the keyboard should open when the input loads.

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
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble