TextField

A set of accessibility traits that should be applied to the field, these will be merged with any existing traits. These traits should relate to the content of the text, for example .header, .link, or .updatesFrequently.

Modifies this text field by binding its focus state to the given state value.

Use this modifier to cause the text field to receive focus whenever the state equals the value. Typically, you create an enumeration of fields that may receive focus, bind an instance of this enumeration, and assign its cases to focusable views.

The following example uses the cases of a LoginForm enumeration to bind the focus state of two TextField elements. A sign-in button validates the fields and sets the bound focusedField value to any field that requires the user to correct a problem.

struct LoginForm: ProxyElement {
    enum Field: Hashable {
        case username
        case password
    }

    var username: String
    var password: String
    var handleLogin: () -> Void

    @FocusState private var focusedField: Field?

    var elementRepresentation: Element {
        Column { column in
            column.add(
                child: TextField(text: "")
                    .focused(when: $focusedField, equals: .username)
            )

            column.add(
                child: TextField(text: "")
                    .focused(when: $focusedField, equals: .password)
            )

            column.add(
                child: Button(
                    onTap: {
                        if username.isEmpty {
                            focusedField = .username
                        } else if password.isEmpty {
                            focusedField = .password
                        } else {
                            handleLogin()
                        }
                    },
                    wrapping: Label(text: "Sign In")
                )
            )
        }
    }
}

To control focus using a Boolean, use the focused(when:) method instead.

Modifies this text field by binding its focus state to the given Boolean state value.

Use this modifier to cause the text field to receive focus whenever the the condition is true. You can use this modifier to observe the focus state of a text field, or programmatically focus or blur the field.

In the following example, a single text field accepts a user’s desired username. The text field binds its focus state to the Boolean value isUsernameFocused. A “Submit” button’s action checks if the username is empty, and sets isUsernameFocused to true, which causes focus to return to the text field.

struct SignupForm: ProxyElement {
    var username: String
    var onSignUpTapped: () -> Void

    @FocusState var isUsernameFocused: Bool

    var elementRepresentation: Element {
        Column { column in
            column.add(
                child: TextField(text: username)
                    .focused(when: $isUsernameFocused)
            )

            column.add(
                child: Button(
                    onTap: {
                        if username.isEmpty {
                            isUsernameFocused = true
                        } else {
                            onSignUpTapped()
                        }
                    },
                    wrapping: Label(text: "Submit")
                )
            )
        }
    }
}

To control focus by matching a value, use the focused(when:equals:) method instead.