Hello,
Does anyone know how to create a input like this one:
I also want to do it, did you figure it out?
No, I had to change the UI from this to simple input box.
Hi I was able to figure it out, using 4 inputs (because my otp will be 4 digits) put those inputs in one row group
Those inputs with no placeholder, content format only numbers, limit the number of characters to one, this input should not be empty
Then setting up the workflow, it had to be “Do when condition is true” (run this everytime)
And then set up only when:
input 1 value number of characters > 0 set focus to input 2
input 2 value number of characters > 0 set focus to input 3
input 3 value number of characters > 0 set focus to input 4
Those have to be 3 workflows
That will take care of the entering the numbers
For erasing the number has to be some other workflows
Do when condition is true (run this everytime)
Only when
input 4 value number of character is < 1
Set focus to input 3 (only when input 3 value number of characters is > 0
input 3 value number of character is < 1
Set focus to input 2 (only when input 2 value number of characters is > 0
input 2 value number of character is < 1
Set focus to input 1 (only when input 1 value number of characters is > 0
Input 1 value number of character is < 1
Set focus to input 1
You have to create another input that will be not visible and collapse when hidden
The initial content of that input would be the dinámic data from the other 4 inputs
And that’s what will be use in the workflows to determine if the OTP is Right or wrong
When otp is wrong I set up a alert to tell the user otp wrong, cnage borders of the 4 inputs to red, and reset data of the group that contains the 4 inputs, when one of the 4 inputs changes, the border color changes to blue and alter disappears
6 Likes