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).