OTP Textfield in SwiftUI | OTP Pin Fields

In this tutorial, you'll learn how to create an OTP Textfield! In this video, we will cover the step-by-step process of building a custom OTP text field that can be used in your SwiftUI projects.

*💡Starting Project:*

*📱Completed Project:*

*🕛 Outline*
0:00 What you will be creating
1:11 Introduction to the starting project
2:20 Creating Textfield Boxes
6:30 Moving to the next Textfield
9:30 Resolving deletion
10:47 One value per textfield

*🤗 Follow me on social media*

This project is licensed under the MIT License .

#otp #textfield #swiftui #swiftuitutorial #tutorial #tutorials

[gunseliunsal]

Thank you! That's what I was looking for :)

[AbhishekChoudhary-hx]

but if the box is empty and we try to press cross button, it didn't go back to previous box. how to manage this?

[thangtruong]

Great video! But how to get the OTP input in Content View when you click Send?

[JayaprakashM-js]

Wes Chua, the deletion works fine when the cursor is placed to the right of a digit. However, if the cursor is placed to the left of the digit, I should also be able to delete it and move the cursor to the previous index. Could you please update the code accordingly?

[LokeshVunnam-cv]

Hello, Thanks for the tutorial. It's amazing work. 🙏
Will please suggest, how can i
1. Avoid entering special characters?
2. Enable/Disable copy/past options to the TextFiled?
Thanks :)

[Sivasli-]

Hello Wes Chua, thanks for this Tutorial this helps me a lot. I have a Question,
For example we have put in these Numbers: 1 2 3 4 5 6
If we delete the Number 3 and go into 4 like 1 2 (4) 5 6 and try do delete it will be stuck at index 3 and do not delete 1 and 2
I hope u have understand what i mean 😅

[SunilKumarSingh-oi]

Can anyone help me to get the SwiftRUI dependency link?

[josejaimefelixgarciagarcia]

If I receive the text, will it automatically fill out the fields?