How to do 4 digits passcode fields?

I have auth system made that requires user to enter 4digit code sent by sms.
How to imitate the input field to look cool with 4 sections for each digit?

I tried to place 4 rounded groups under and on top of input field(designed to look like it), but then i was not able to click on the input anymore.

Anyone have some ideas, solutions and experiances?
Added photo for reference.

Thanks a lot, see you in comments guys! :star_struck:

Have 4 inputs and concatenate them in a custom state with when input value is changed

Verify the state instead of the inputs.

1 Like

I messed around with this and was able to build the following:

Demo: Your Bubble app (
Editor: Bsi-forum-app | Bubble Editor

The input is there to use as the full value in order to verify it agains something else. I would hide it so that it is not visible. Take a look through the editor and if you have any questions on how I did it, let me know.


Thanks. Solved. Awesome.

This topic was automatically closed after 70 days. New replies are no longer allowed.