Hi everyone 
I recently helped a friend create an OTP Input Field, and while helping another user with a similar project, I checked online to see if there was something like it.
Since I didn’t find anything,
I’m not sure if “OTP Input Field” this is the correct name for this layout, if you know a better name, let me know, thanks.
I thought it would be nice to make a guide, so let’s get started!
Layout
I created 6 textboxes (but you can use as many as you want) and placed them inside 6 cardviews, giving them a border just to make the layout a bit more lively
.I also added a button to verify the boxes.
Blocks
We create a variable
textboxes with all the textbox components.
I used a
WhenAnyTextBox.OnTextChanged to manage everything in a single block.
First, we check that the modified textbox is present in textboxes
and save two variables, its position in the textboxes list and its text content.
If
text is empty (meaning the user deleted its content), we set the focus to the previous box by selecting the previous index in textboxes (if the position is 1, it requests focus on itself).
Similarly, if the length of
text is = 1, we set the focus to the next textbox.
Finally, if the length is greater than 1, we reverse
text and select the first character (so if a user types into a box that’s already filled, only the last entered character remains).
We also set the cursor at the end.
With the button, we simply join all the characters from the textboxes and check if it equals something, in this case, “123456”.
GotFocus/LostFocus
If you want to add focus on the current box, you just need to create a variable cardviews with the respective CardViews
and add the two lost and got focus blocks like this.
Unfortunately, the Stroke Width doesn’t work very well, so I haven’t implemented it.
Result
AIA
OTPInputField.aia (4.8 KB)
.