How to use the @FocusState property wrapper in SwiftUI

Here’s how to make TextFields focused and not let a form close until the proper fields are filled out by the user.

This article is also a video

WWDC 2021 introduced the property wrapper @FocusState. It can be used to set which textfields are in focus pretty easily. I’m going to open this form for adding a new bag of coffee an app I’m working on.

Notice how when I click on save it just closes the form and doesn’t dismiss the keyboard. The @FocusState can help fix that. First thing that needs to be added is an enum with the fields that we want to be required.

private enum Field {
    case name
    case style
    case roaster
}

The enum needs to conform to the Hashable protocol so you can either force conformance by adding : Hashable or as long as the cases don’t have a value assigned you should be good since Swift will do that “automagically”.

Now, we need to add a variable with the property wrapper @FocusState private var focusField: Field
Then on the TextFields, add the focused modifier and what field it should be equal to

TextField("Name", text: $beans.name)
    .textFieldStyle(.roundedBorder)
    .focused($focusedField, equals: .name)
TextField("Style", text: $beans.style)
    .textFieldStyle(.roundedBorder)
    .focused($focusedField, equals: .style)

TextField("Roaster", text: $beans.roaster)
    .textFieldStyle(.roundedBorder)
    .focused($focusedField, equals: .roaster)

Next, let’s put some logic in to make sure these fields are filled and set the next focusedField

Button {
    if beans.name.isEmpty {
        focusedField = .name
    } else if beans.style.isEmpty {
        focusedField = .style
    } else if beans.roaster.isEmpty {
        focusedField = .roaster
    } else {
        if isEdit {
            beans.updateBean(context: viewContext)
        } else {
            beans.addBeansToData(context: viewContext)
            resetBeans()
        }
      showForm = false
    }
}

Also, after a successful save, we should set the focusedfield to nil and dismiss the keyboard

Button {
    if beans.name.isEmpty {
        focusedField = .name
    } else if beans.style.isEmpty {
        focusedField = .style
    } else if beans.roaster.isEmpty {
        focusedField = .roaster
    } else {
        if isEdit {
            beans.updateBean(context: viewContext)
        } else {
            beans.addBeansToData(context: viewContext)
            resetBeans()
        }
      showForm = false
      focusedField = nil
    }
}

Now, let’s run through the form one more time to just show it all together.

Hopefully that showed you how to use the @FocusState property wrapper. If you have any questions, then please drop a comment below.

Want my posts directly to your inbox?
Great! Sign up here!