How to Limit Characters in iOS SwiftUI TextField

In some scenarios, you may need to limit the number of characters a user can enter into a TextField, such as when creating a username or entering a PIN.

SwiftUI provides flexible ways to achieve this, and in this post, we’ll explore how to limit the number of characters in a TextField.

Example of Limiting Characters to 10

Here’s an example of limiting the characters to 10 in a SwiftUI TextField:

struct ContentView: View {
    @State private var text = ""
    private let characterLimit = 10

    var body: some View {
        TextField("Enter text", text: $text)
            .onChange(of: text) { newValue in
                if text.count > characterLimit {
                    text = String(text.prefix(characterLimit))
                }
            }
            .padding()
    }
}

Explanation

Let’s break down the code to understand how it works:

@State Property Wrapper

The @State private variable text is used to bind the text from the TextField. It triggers the view to update when the text changes.

Character Limit

A constant characterLimit is defined and set to 10, which specifies the maximum number of characters allowed in the TextField.

TextField

The TextField is created with a placeholder "Enter text" and is bound to the text state variable.

onChange Modifier

The onChange modifier is used to observe changes to the text state variable. Inside the closure, we check if the text’s count exceeds the character limit. If it does, we update the text to only include the first 10 characters.

Padding

Padding is added to provide space around the TextField, enhancing the appearance.

Limiting characters in a SwiftUI TextField is a valuable feature for controlling user input in forms and other text entry scenarios. By using the onChange modifier and checking the text’s count, you can easily enforce a character limit and create a controlled input experience for your users.