Change TextField placeholder color in SwiftUI

In this tutorial, we will see how to change the placeholder color of a TextField in SwiftUI.

To change the color of the placeholder text in a SwiftUI TextField, instead of using the regular placeholder text, we will use the prompt initializer. We can create the placeholder text using the prompt and a Text element. Then we can change the color of that Text element.

Change the color of the placeholder

We can change the color of the placeholder by applying the foregroundColor() modifier to that Text element.

import SwiftUI

struct ContentView: View {
    @State private var textInput: String = ""
    
    var body: some View {
        TextField("",
                  text: $textInput,
                  prompt: Text("Placeholder")
                            .foregroundColor(.blue)
        )
        .font(.title)
        .padding()
        .textFieldStyle(RoundedBorderTextFieldStyle())
    }
}

In the above code, I have used the prompt parameter with a Text view to set the placeholder in the TextField.

Then, I have applied foregroundColor(.blue) to change the placeholder color to blue.

Output:

Adjusting placeholder opacity

Now, if we want the placeholder text color to have a faded appearance (similar to the default placeholder), we can use the opacity modifier on the color.

Example

import SwiftUI

struct ContentView: View {
    @State private var textInput: String = ""
    
    var body: some View {
        TextField("",
                  text: $textInput,
                  prompt: Text("Placeholder")
                            // Setting placeholder text color and opacity
                            .foregroundColor(.blue.opacity(0.5))
        )
        .font(.title)
        .padding()
        .textFieldStyle(RoundedBorderTextFieldStyle())
    }
}

In the above code, I have applied the .opacity() modifier to the color to control the transparency of the placeholder text color. So, the placeholder text will appear in blue with an opacity of 0.5, creating a faded effect.