Set TextField Focus in SwiftUI

Managing the focus of a TextField in SwiftUI has been a long-awaited feature, as it allows developers to create more user-friendly and intuitive interfaces. With the introduction of the @FocusState property wrapper and the focused modifier in SwiftUI 3 (iOS 15, macOS 12), developers can now easily control the focus state of their TextFields. In this blog post, we will explore how to set TextField focus in SwiftUI using these new tools.

First, you need to create a @FocusState property in your view to keep track of the TextField's focus status. The FocusState property should be of the FocusState<Bool>.Binding type. Here's an example:

import SwiftUI

struct ContentView: View {
    @FocusState private var isFocused: Bool
    
    var body: some View {
        // Your view code
    }
}

Next, add a TextField to your view and use the focused modifier to bind the TextField's focus state to the @FocusState property created earlier:

TextField("Enter text here...", text: $yourText)
    .focused($isFocused)

Now that the focus state is connected to the TextField, you can control the focus programmatically using the isFocused property. For example, you can create a button that focuses the TextField when tapped:

Button("Focus TextField") {
    isFocused = true
}

Here's a complete example of setting TextField focus in SwiftUI:

import SwiftUI

struct ContentView: View {
    @State private var yourText: String = ""
    @FocusState private var isFocused: Bool

    var body: some View {
        VStack {
            TextField("Enter text here...", text: $yourText)
                .focused($isFocused)
                .padding()
                .border(Color.gray, width: isFocused ? 2 : 1)

            Button("Focus TextField") {
                isFocused = true
            }
            .padding()
        }
        .padding()
    }
}

In this example, we have a TextField with a focus state managed by the isFocused property. The TextField's border color changes based on its focus state. There's also a button that, when tapped, sets the focus state to true, thus focusing the TextField.

Hope that article helps you focus on the things that matter.

XOXO, Christian 👨🏻‍💻