SwiftUI TextField clear button

Creating a clear button for a TextField in SwiftUI can greatly enhance the user experience and make your app more user-friendly. This simple feature allows users to easily clear the text within the TextField, eliminating the need to manually delete characters. 

A clear button allows users to quickly erase the content of a TextField with a single tap. It eliminates the need to manually delete characters, making it more efficient for users to correct their input or start over.

In this blog post, I will walk you through the steps of implementing a clear button for a TextField in SwiftUI. You will learn how to quickly add a clear button to one TextField and you will also learn how to create a ViewModifier so you can reuse the solution throughout your app.

Quick clear button to TextField in SwiftUI

Unluckily there is no easy and build in modifier for a SwiftUI TextField, so we have to be a little creative.

We can create a TextField with a clear button by creating a HStack and inside the HStack we add a button and a image.

HStack {
    TextField("", text: $textInput)
        if !textInput.isEmpty {
            Button {
                textInput = ""
            }label: {
                Image(systemName: "multiply.circle.fill")
            }
            .padding(.trailing, 10)
        }
}
.border(.blue)

The result:

And there we basically have it, we made a TextField with a clear button. You can of course change the image to something else if you want and if you want to change the color of the image simply use .foregroundColor.

The only issue with this solution is that if you want to create another TextField with a clear button, you have to write all that code. So in the next section I will show you how you can wrap it in a ViewModifier and reuse it every where.

SwiftUI TextField clear button as modifier

In this section we will wrap the solution above in a ViewModifier, so we can reuse it everywhere in the app and make sure the TextFields look similar.

There are two steps in wrapping it in a ViewModifier: Create the ViewModifier and create a extension of View and use the ViewModifier:

ClearButton:

struct ClearButton: ViewModifier {
    @Binding var text: String
    
    func body(content: Content) -> some View {
        
        HStack {
            content
            if !text.isEmpty {
                Button {
                    text = ""
                }label: {
                    Image(systemName: "multiply.circle.fill")
                        .foregroundColor(.gray)
                }
                .padding(.trailing, 10)
            }
        }
    }
}

Extension of View:

extension View {
    func clearButton(text: Binding<String>) -> some View {
        modifier(ClearButton(text: text))
    }
}

Now we have created a clear button and now we just need to use it:

TextField("", text: $textInput)
    .clearButton(text: $textInput)
    .border(.blue)
    .padding()

The result:

As you can see when creating a ViewModifier you have a much cleaner code and consistency through out your app.

Conclusion

In this blog post, we’ve learned how to create a clear button for a TextField in SwiftUI. This simple feature can significantly improve the user experience by making it easy for users to clear the TextField’s content with a single tap. 

Thank you for reading and I hope you can use it 🙂 

Scroll to Top