UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

Adding a clear button to a TextField

Forums > 100 Days of Swift

In UIKit you can set textField.clearButtonMode = .whileEditing to make the text field automatically show a standard clear button inside that clears the text once the user types something. I was looking for a way to do that in SwiftUI, but the answers I found suggest either: 1) setting it globally for all buttons using UIAppearance, or 2) creating a custom button that just happens to look similar and is overlaid on top of the text field - so basically I have a choice between a hacky solution and a very hacky solution…

What's the least hacky way to do this (I assume there's no built-in modifier that sets this like .keyboardType for the keyboard type)?

4      

Ok, but… the code you've shown above does what you said is a band-aid, it creates a custom button that looks like it's the built-in text field clear button that iOS provides, but isn't one, right? I want to tell SwiftUI "I want this TextField to show exactly the thing that UITextField shows when configured with clearButtonMode", not something that looks and works like that button, but something that is that button. So that when iOS 16 is released that happens to show this clear button in UITextFields in a different way, my text field will also look that way.

4      

There is no native SwiftUI way to show that button at the present time. You have to either a) roll your own TextField replacement using a UIViewRepresentable to wrap a UITextField, b) use UIAppearance to force it, or c) create a button using SwiftUI, something like this:

struct TextFieldClearButton: ViewModifier {
    @Binding var fieldText: String

    func body(content: Content) -> some View {
        content
            .overlay {
                if !fieldText.isEmpty {
                    HStack {
                        Spacer()
                        Button {
                            fieldText = ""
                        } label: {
                            Image(systemName: "multiply.circle.fill")
                        }
                        .foregroundColor(.secondary)
                        .padding(.trailing, 4)
                    }
                }
            }
    }
}

extension View {
    func showClearButton(_ text: Binding<String>) -> some View {
        self.modifier(TextFieldClearButton(fieldText: text))
    }
}

struct TextFieldButton: View {

    @State private var text = ""
    @FocusState private var isTextFieldFocused: Bool

    var body: some View {
        VStack {
            TextField("", text: $text)
                .textFieldStyle(.roundedBorder)
                .focused($isTextFieldFocused)
                .showClearButton($text)
        }
        .padding()
        .background(Color.purple)
    }
}

I know it seems hacky, but that the way you do things in SwiftUI until Apple sees fit to give us a native way of doing it.

6      

You can also try the new .searchable(text: ) https://www.hackingwithswift.com/quick-start/swiftui/how-to-add-a-search-bar-to-filter-your-data

With this you get the clear button and the magnifying glass icon for free!

3      

Just came up with this solution

import SwiftUI

struct ClearableTextField: View {

    var title: String
    @Binding var text: String

    init(_ title: String, text: Binding<String>) {
        self.title = title
        _text = text
    }

    var body: some View {
        ZStack(alignment: .trailing) {
            TextField(title, text: $text)
            Image(systemName: "xmark.circle.fill")
            .foregroundColor(.secondary)
            .onTapGesture {
                text = ""
            }
        }
    }
}

3      

Just an update for this. If you add this modifier to TextField then you get the clear button.

.onAppear {
    UITextField.appearance().clearButtonMode = .whileEditing
}

7      

RE: @NigelGee

that merely gives you the appearance of a clear button, it does not come with the expected function of a clear button. the OP already knows about this when posting the question one year ago.

3      

TAKE YOUR SKILLS TO THE NEXT LEVEL If you like Hacking with Swift, you'll love Hacking with Swift+ – it's my premium service where you can learn advanced Swift and SwiftUI, functional programming, algorithms, and more. Plus it comes with stacks of benefits, including monthly live streams, downloadable projects, a 20% discount on all books, and free gifts!

Find out more

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.