Managing focus in SwiftUI with FocusState

SwiftUI provides the @FocusState property wrapper to observe and control focus in a view hierarchy. We can use it to focus a text field programmatically, move focus between fields, or remove focus to dismiss the keyboard.

In this article, we'll look at the different ways to represent focus and how to pass focus state between views.

Architecture & Design Patterns for iOS

This book is a practical guide to essential architectural principles and design patterns for iOS development. It covers strategies for building maintainable apps with Swift and SwiftUI, including dependency injection, navigation, common patterns, and modularization.

LEARN MORE

Managing focus for a single view

When we only need to manage one focusable view, we can represent its focus state with a Bool:

struct NameView: View {
    @State private var name = ""
    @FocusState private var isNameFocused: Bool

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

            Button("Edit name") {
                isNameFocused = true
            }
        }
    }
}

The focused(_:) modifier connects the text field to isNameFocused. The value changes to true when the text field receives focus and back to false when focus leaves it.

This connection also works in the other direction. Setting the value to true moves focus to the text field. Setting it to false removes focus.

Managing focus for multiple views

For multiple focusable views, a single Boolean is no longer enough because it cannot describe which view is focused. We can use an optional enum instead:

struct LoginView: View {
    private enum Field: Hashable {
        case email
        case password
    }

    @State private var email = ""
    @State private var password = ""
    @FocusState private var focusedField: Field?

    var body: some View {
        Form {
            TextField("Email", text: $email)
                .textContentType(.emailAddress)
                .submitLabel(.next)
                .focused($focusedField, equals: .email)
                .onSubmit {
                    focusedField = .password
                }

            SecureField("Password", text: $password)
                .textContentType(.password)
                .submitLabel(.done)
                .focused($focusedField, equals: .password)
                .onSubmit {
                    focusedField = nil
                }

            Button("Sign in") {
                validate()
            }
        }
    }

    private func validate() {
        if email.isEmpty {
            focusedField = .email
        } else if password.isEmpty {
            focusedField = .password
        } else {
            focusedField = nil
            signIn()
        }
    }
}

Each field is connected to its corresponding enum case using focused(_:equals:). When a field receives focus, focusedField is updated with that case. Assigning a case programmatically moves focus to the associated field.

The value is optional because focus can also be outside both fields. Setting it to nil removes focus from all views connected to this property and dismisses the keyboard.

Avoiding ambiguous focus bindings

Each focus value should identify one focus destination. Connecting the same enum case to multiple views makes programmatic focus ambiguous:

TextField("First name", text: $firstName)
    .focused($focusedField, equals: .name)

TextField("Last name", text: $lastName)
    .focused($focusedField, equals: .name)

When either field receives focus, focusedField becomes .name. But when we assign .name ourselves, SwiftUI cannot determine which field should receive focus. Using a separate enum case for each destination avoids this ambiguity.

Passing focus state to a child view

Sometimes the focusable control is extracted into a child view. In this case, we can pass the projected focus state as a FocusState.Binding:

struct ParentView: View {
    @FocusState private var isNameFocused: Bool

    var body: some View {
        NameField(isFocused: $isNameFocused)
    }
}

struct NameField: View {
    @State private var name = ""
    @FocusState.Binding var isFocused: Bool

    var body: some View {
        TextField("Name", text: $name)
            .focused($isFocused)
    }
}

This is useful when the child contains the view whose focus is represented by the property. The child attaches the binding to that view with the focused(_:) modifier, while the parent can still observe and change the focus.