How to Add TextField Background Color in iOS SwiftUI

Styling plays a crucial role in app design, allowing developers to create a visually pleasing and interactive user experience. One common enhancement is adding a background color to text fields.

In SwiftUI, this task is quite straightforward. In this blog post, we’ll walk you through how to set a background color to a TextField using a simple example.

Change TextField Background Color in SwiftUI

Setting a background color to a TextField can transform its appearance, making it stand out or align with your app’s overall theme. Here’s an example of how to set a yellow background color to a TextField:

struct ContentView: View {
    @State private var text: String = ""
    var body: some View {
        TextField("Enter text here", text: $text)
            .padding()
            .background(Color.yellow)
            .cornerRadius(8)
            .padding(.horizontal)
    }
}

In this example, we’ve used the background modifier and set the color to yellow. Adding padding and corner radius helps in enhancing the appearance, making the TextField look more refined.

Adding a background color to a TextField in SwiftUI is a simple yet effective way to improve the visual aesthetics of your app. By utilizing the background modifier, as demonstrated in the above example, you can quickly apply this styling to enhance your app’s user interface.