Apr 24, 2024 iOS

SwiftUI: How to make TextField become first responder?

Certainly! Making a TextField become the first responder in SwiftUI can be achieved using a few different approaches. Let’s explore them:

  1. Using @FocusState (iOS 15 and later): SwiftUI introduced the @FocusState property wrapper, which allows you to control which input field has focus. Here’s how you can use it:
struct ContentView: View {
    @FocusState private var focused: Bool
    @State private var name = "Mango Umbrella"

    var body: some View {
        VStack {
            TextField("Name", text: $name)

            Button("Focus on name") {
                focused = true

In this example, the TextField will become the first responder when the view appears. The @FocusState property ensures that the keyboard appears, allowing the user to start typing right away1.

Before iOS 15:

  • There’s no direct SwiftUI method, but you have two options:
    1. SwiftUIX Library:
    • Install the SwiftUIX library using Swift Package Manager.
    • This library provides helper functions for making views first responders.
    1. Custom TextField with UIRepresentable:
    • Create a custom TextField that inherits from UIViewRepresentable.
    • Override the makeUIView method to access the underlying UITextField and call its becomeFirstResponder() method.

2. Using UIViewRepresentable (UIKit fallback): If you’re targeting earlier iOS versions or need more control, you can wrap a UITextField using UIViewRepresentable. Here’s an example:

struct MyTextField: UIViewRepresentable {
    typealias UIViewType = UITextField
    @Binding var becomeFirstResponder: Bool

    func makeUIView(context: Context) -> UITextField {
        return UITextField()

    func updateUIView(_ textField: UITextField, context: Context) {
        if becomeFirstResponder {
            DispatchQueue.main.async {
                becomeFirstResponder = false

    To make the TextField the first responder when the view appears, use it like this:

    struct ContentView: View {
        @State private var becomeFirstResponder = true
        var body: some View {
            MyTextField(becomeFirstResponder: $becomeFirstResponder)
                .onAppear {
                    becomeFirstResponder = true
    1. This approach works without any arbitrary delays and ensures that the TextField becomes the first responder immediately1.

    Remember that SwiftUI encourages using @Binding for more robust behavior.