SwiftUI TextField Placeholder: Best Practices and Tips

A well-crafted placeholder can greatly impact the overall user experience. In this blog post, we will explore the importance of TextField placeholders, learn how to change the color of the placeholder, use a image in placeholder and change the font. We will end the blog post with some great tips make better placeholders.

What is a TextField Placeholder?

In SwiftUI, a TextField is a view used to capture user input, such as text or numbers. The TextField placeholder serves as a subtle yet powerful tool to guide users and communicate the expected input without cluttering the interface. 

Basic example of TextField placeholder in SwiftUI

To use the placeholder in a SwiftUI TextField, you simply need to provide a string as the first parameter to the TextField initializer. Here’s a basic example of how to create a TextField where the placeholder will say “Placeholder text — right here..”:

struct TextFieldContent: View {
    @State var textInput: String = ""
    
    var body: some View {
        TextField("Placeholder text - right here..", text: $textInput)
    }
}

The result:

TextField placeholder with image in SwiftUI

In SwiftUI there is no build in way of adding an image to a TextField, but luckily there is a easy and nice workaround you can use.

What you do is you place a TextField and a Image inside a HStack and then the image will be besides the TextField:

struct TextFieldContent: View {
    @State var textInput: String = ""
    
    var body: some View {
        HStack {
            Image(systemName: "key.horizontal")
                .padding(.leading, 20.0)
            
            TextField("Key image", text: $textInput)
        }
    }
}

The result:

In the example above we added a sf symbol of a key to the left of the TextField and because it’s inside a HStack it looks like the image is inside the TextField.

Change TextField placeholder color in SwiftUI

To change the color for your placeholder you want to leave the placeholder initializer empty and instead use the prompt initializer where you put a Text element and .

In the following example we will make the placeholder text blue.

struct TextFieldContent: View {
    @State private var textInput: String = ""
    
    var body: some View {
        TextField("",
                  text: $textInput,
                  prompt: Text("Placeholder text")
                            .foregroundColor(.blue)
        )
    }
}

The result:

And if you want your placeholder text color to fade a bit like the default placeholder, you simply use opacity modifier on the color:

struct TextFieldContent: View {
    @State private var textInput: String = ""
    
    var body: some View {
        TextField("",
                  text: $textInput,
                  prompt: Text("Placeholder text")
                            .foregroundColor(.blue.opacity(0.5))
        )
    }
}

The result:

Now you changed the color for your placeholder and you can of course use any color you want.

SwiftUI TextField placeholder font

How to change placeholder font of TextField? Great question and if you read the solution on how to change the color for the placeholder, you might already have figured it out.

We will again use the prompt initializer but insead of changing the foregroundColor we will change the font. In the following example we will change the font size to 31, make it bold and use monospaced as design:

struct TextFieldContent: View {
    @State private var textInput: String = ""
    
    var body: some View {
        TextField("",
                  text: $textInput,
                  prompt: Text("Placeholder text")
                            .font(
                                .system(size: 31,
                                        weight: .bold,
                                        design: .monospaced)
                            )
        )
    }
}

The result:

Tips for better placeholder

Here you have a 5 point bullet list with some things to thank about when you create your placeholders.

  1. Keep the placeholder text short, simple, and relevant to the input field’s purpose. Avoid using technical jargon or confusing language.
  2. Use Hints, not Instructions – While placeholders offer guidance, they should not replace labels or tooltips that provide explicit instructions. Labels should accompany TextFields to ensure accessibility and usability for all users.
  3. Choose a visually distinctive text style or color for the placeholder to differentiate it from user input. Ensure sufficient contrast with the background to make it easily readable.
  4. Make sure the placeholder disappears once the user starts typing and reappears when the field is empty. This behavior reminds users of the expected input, avoiding confusion.
  5. Plan for localization from the start and ensure that your placeholders can be easily translated into different languages without truncation or layout issues.
Scroll to Top