Enter verification code from email. Input min & max value constraint not working

[ehijiagboneclement]

I am trying to create an interface where the user can only enter a single number inside an input. I have added four inputs for the four digit codes. I have two challenges, I need to know how to restrict each input to only accept one number and I also need to know the workflow to generate the email 4 digit code. I am using postmark

[dev.goldenaxe]

Hey! You’re hitting two separate things here - let me address the first one.

The min/max value constraint controls the numeric range of the value (e.g., must be between 0 and 9), not how many characters the user can type. That’s why it isn’t working.

Here’s the correct approach:

1. Select one of your digit Input elements and open its property editor.

2. Under the Appearance tab, set Content format to “Text (numbers only)”.

   • Don’t use “Integer” here — when Content format is set to Integer, Bubble hides the character limit option entirely.

3. Check the “Limit the number of characters” checkbox.

4. Set Maximum number to 1.

Repeat for all four inputs. This hard-stops the user from typing more than one digit per box, while still triggering the numeric keyboard on mobile.

[dev.goldenaxe]

For Random string generating for your email - Use Bubble’s Calculate Formula function to generate a random 4-digit string.

[ehijiagboneclement]

This worked for ensuring one max number. Thank you. However for a smoother UX, I want to automatically set focus to the next input as soon as the first digit is entered in input 1. for example if the code is 4321, the user should be able to enter all four without having to tap on all inputs to set focus. Is this achievable ?

[dev.goldenaxe]

For each input, create a workflow using the “Do when condition is true” event and set condition as Input A's value:count = 1 and have the action to Set focus → Input B. Repeat the same for all inputs to shift focus from one to another.

[ehijiagboneclement]

This worked. Thank you.