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=otpEditor page:
-
https://bubble.io/page?id=bubbleaxis&app_type=mobile&tab=Design&name=otp&type=page