How Can I Adjust TextField Placeholder Color : SwiftUI

Question

I found that I can customize TextField style in swift like this..

struct BottomLineTextFieldStyle: TextFieldStyle {
    func _body(configuration: TextField<Self._Label>) -> some View {
        VStack() {
            configuration

            Rectangle()
                .frame(height: 1, alignment: .bottom)
                .foregroundColor(Color.white)
        }
    }
}

This allows me to use "underline shape style" text field.

Usage

TextField("placeholder", text: $value).textFieldStyle(BottomLineTextFieldStyle()).foregroundColor(.white)

However I also wanted to change placeholder color, but I couldn't.

So, my question is how can I customize textfield's placeholder color? please help me and thanks for reading.

Answer 1

You cannot change the default color of the placeholder yet. However, you can achieve it by writing a custom TextField using either UITextField or UITextView. Here is an example where I created a custom TextArea View using UITextView where I can set custom color to the placeholder. See my comment below in makeUIView(_:)

struct TextArea: UIViewRepresentable {
    @State var placeholder: String
    @Binding var text: String

    func makeCoordinator() -> Coordinator {
        Coordinator(self, placeholder: placeholder)
    }

    func makeUIView(context: Context) -> UITextView {
        let textView = UITextView()
        textView.text = placeholder

        // Here you can set the color for placeholder text as per your choice. 
        textView.textColor = .lightGray

        textView.delegate = context.coordinator
        return textView
    }

    func updateUIView(_ textView: UITextView, context: Context) {
        if !text.isEmpty {
            textView.text = text
            textView.textColor = .black
        }
    }

    class Coordinator: NSObject, UITextViewDelegate {
        var textArea: TextArea
        var placeholder: String

        init(_ textArea: TextArea, placeholder: String) {
            self.textArea = textArea
            self.placeholder = placeholder
        }

        func textViewDidBeginEditing(_ textView: UITextView) {
            if textView.textColor == .lightGray {
                textView.text = nil
                textView.textColor = .black
            }
        }

        func textViewDidEndEditing(_ textView: UITextView) {
            if textView.text.isEmpty {
                textView.text = placeholder
                textView.textColor = UIColor.lightGray
            }
        }
    }
}

EDIT:

The above text area can be used in the view like this:

 TextArea(placeholder: textValue, text: $textValue)

Answer 2

So, my question is how can I customize textfield's placeholder color?

Unfortunately it is not possible to change standard TextField placeholder's color so far. However it is possible to modify it somehow, so, I assume worth posting

In below demo TextField color's modified, Password's one is default.

struct BottomLineTextFieldStyle: TextFieldStyle {
    func _body(configuration: TextField<Self._Label>) -> some View {
        VStack() {
            configuration
                .colorMultiply(.red)
                .foregroundColor(.red)

            Rectangle()
                .frame(height: 1, alignment: .bottom)
                .foregroundColor(.red)
        }
    }
}

Answer 3

A simple Z Stack solves all placeholder issues.

Just create a Text() view behind the TextField

You can do anything with it. Colour, gradients, transitions, etc

     @State var text = ""

     ZStack {
          
          if text == "" {
           Text("Placeholder of my choice")
           }

           TextField("", text: $text)
            }