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 🙂