SwiftUI TextField: OnChange Observer

Imagine a scenario where you want to limit your TextField’s input count to a certain number. For example, you are expecting user’s firstName to be 100 chars long(for better indexing and optimization on Database side), you have two choices, truncate input once user finished editing the field(use OnSubmit for that) or observe what’s being typed in TextField, keep a counter and once the counter reaches the limit, stop taking input. This is where the onChange observer can be helpful. You can observe input from the user via onChange and react to it. Another use-case could be to only allow certain character types to be typed into the field.

For our example, we will limit the user’s first name to 10 char counts and ask them for their age(Numeric Chars).

struct TextFieldExample: View {
    
    @State private var firstName: String = ""
    @State private var age: String = ""
    
    @FocusState private var focusAge: Bool
    
    var body: some View {
        VStack {
            
            Image("dt")
                .resizable()
                .frame(width: 100, height: 100)
                .clipShape(Circle())
                .shadow(color: Color.black, radius: 2, x: 1, y: 1)
                .overlay(Circle().stroke(Color.gray, lineWidth: 2))
HStack {
                Image(systemName: "person.crop.circle.fill")
                    .foregroundColor(.gray).font(.headline)
                TextField("First Name", text: $firstName)
                    .keyboardType(.asciiCapable)
                    .submitLabel(.next)
                    .onSubmit {
                        focusAge = true
                    }
                    .onChange(of: firstName) { newValue in
                        firstName = String(newValue.prefix(10))
                    }
            }
            .padding()
            .overlay(RoundedRectangle(cornerRadius: 8).stroke(.gray, lineWidth: 1))
            .padding(.horizontal)
        
            HStack {
                Image(systemName: "heart.circle")
                    .foregroundColor(.gray).font(.headline)
                TextField("Enter age", text: $age)
                    .keyboardType(.emailAddress)
                    .submitLabel(.done)
                    .focused($focusAge)
                    .onChange(of: age) { newValue in
                        let filtered = newValue.filter { $0.isNumber }
                        if newValue != filtered {
                            age = filtered
                        }
                    }
            }
            .padding()
            .overlay(RoundedRectangle(cornerRadius: 8).stroke(.gray, lineWidth: 1))
            .padding(.horizontal)
        }
    }
}