Change the background color of a TextField in SwiftUI

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

We can change the background color of a TextField in SwiftUI in several ways. Now, follow the steps below to achieve this task.

Using the background() modifier

We can apply the .background() modifier on the TextField to set the background color of a TextField.

Example

import SwiftUI

struct ContentView: View {
    @State private var text = ""

    var body: some View {
        TextField("Enter text", text: $text)
            .padding()
            // To change the background color
            .background(Color.mint)
            // To create rounded corners for the TextField
            .cornerRadius(8)
            .padding()
    }
}

In the above program, I have applied the .background() modifier on the TextField specifying the color .mint as an argument of the .background() modifier.

So, it will display a TextField with mint colored background.

Output:

Using background() modifier with RoundedRectangle

If we want to use the RoundedRectangle  shape as the background for the TextField, we can do that by putting the shape it into the background() modifier.

Example

import SwiftUI

struct ContentView: View {
    @State private var text = ""

    var body: some View {
        TextField("Enter text", text: $text)
            .padding()
            .background(
                // Creates a RoundedRectangle with a corner radius of 10
                RoundedRectangle(cornerRadius: 10)
                    // Change the background color here
                    .foregroundColor(Color.yellow)
            )
            .padding()
    }
}

In the above program, I have used the RoundedRectangle with a corner radius of 10 as the background shape of the TextField.

The foregroundColor  modifier is used to set the color of the rounded rectangle ( background) to yellow.

Output:

Conditional Background Change

Now, we can also change the background color conditionally after tapping the TextField based on a state variable.

import SwiftUI

struct ContentView: View {
    @State private var text = ""
    // State variable to toggle between colors
    @State private var isActive = false

    var body: some View {
        TextField("Enter text", text: $text)
            .padding()
            .background(isActive ? Color.yellow : Color.gray) // Toggle between colors
            .cornerRadius(8)
            .padding()
            // Add a tap gesture to the TextField
            .onTapGesture {
                self.isActive.toggle() // Toggles between colors on tap
            }
    }
}

In the above program, I have declared a boolean state variable isActive to control the toggle between background colors (yellow and gray).

The .onTapGesture() modifier is used to add a tap gesture to the TextField. When we press the TextField it will toggle the isActive state variable and switch between yellow and gray.

Output:

You can also check out the link to Change the TextField style after tapping on it in SwiftUI

Applying gradient background to a TextField

In SwiftUI, we can apply a gradient background to a TextField using the background() modifier. Here’s an example of how we can achieve this with a gradient background.

import SwiftUI

struct ContentView: View {
    @State private var text = ""

    var body: some View {
        TextField("Enter text", text: $text)
            .padding()
            .background(
                LinearGradient(
                    // Defines a linear gradient from orange to yellow
                    gradient: Gradient(colors: [Color.orange, Color.yellow]),
                    startPoint: .top, // Starts the gradient from the top of the TextField
                    endPoint: .bottom // Ends the gradient at the bottom of the TextField
                )
            )
            .cornerRadius(8)
            .padding()

    }
}

The above SwiftUI code will create a TextField with a gradient background that transitions from orange to yellow.

Output: