How to use the @FocusState property wrapper in SwiftUI
Tags: swift, swiftui
Published: 2022-04-29 16:12:57

---
title: How to use the @FocusState property wrapper in SwiftUI
published: true
description: Here’s how to make TextFields focused and not let a form close until the proper fields are filled out by the user.
tags: [swift, swiftui]
cover_image: https://cctplus.dev/content/images/2022/03/2022-03-10-0.5.png
canonical_url: https://cctplus.dev/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.

{% embed https://youtu.be/P1dL96vJhLg %}
*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.

```swift
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

```swift
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

```swift
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

```swift
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](https://cctplus.dev/#/portal)!