How to Use the PIN/OTP Style Input This plugin provides a sleek, multi-box interface for capturing verification codes. It automatically handles focus shifting between boxes for a smooth mobile and desktop experience.

1. Setup & Configuration
Place the "PIN Code / OTP Style Input" element on your page.

Length: In the property editor, set the length field to specify how many boxes to display (e.g., 4 or 6).

Styling: Use Bubble's standard style properties (Background, Borders, Shadow) to customize the appearance of the input area.

2. Accessing the Data
The full code entered by the user is available in real-time.

Exposed State: Reference PIN Code Input A's value (Type: text) to get the complete string of characters entered across all boxes.

3. Using Workflows
Event: Use the "Value has changed" event to trigger workflows whenever a user types or deletes a character.

Logic: This is ideal for automatically triggering a "Verify" workflow once PIN Code Input A's value:number of characters is PIN Code Input A's length.

Pro Tips:
Auto-Focus: The plugin is designed to move the cursor to the next box automatically upon typing and back to the previous box upon pressing Backspace.



Demo page URL: https://hks-demos.bubbleapps.io/version-test/pin_otp_input_demo

Demo Editor: https://bubble.io/page?id=hks-demos&tab=Design&name=pin_otp_input_demo&type=page&elements=cmMoG0