SwiftUI TextField: TextField Style

By default, TextField doesn’t have any border or style around it so if you don’t have prompt it almost blend itself into the background of the app as you can see below:

We can’t tell if there is any TextField there on screen until user taps on the field. We need to style our TextField better so it can be visible.

There is a modifier to make TextField standout and it’s called TextFieldStyle.

TextFieldStyle has three predefined values: automatic, plain, and roundedBorder.

automatic and plain render TextField without any border whereas roundedBorder style renders a border around TextField. Example below shows the visual difference between them:

struct TextFieldExample: View {
    
    @State private var title: String = ""
    @State private var category: String = ""
    @State private var type: String = ""
    
    var body: some View {
        VStack {
            Text("DevTechie Courses")
                .font(.largeTitle)
            
            VStack(alignment: .leading) {
                Text("Enter new course title")
                    .font(.title3)
                
                TextField("RoundedBorder TextFieldStyle", text: $title)
                    .textFieldStyle(.roundedBorder)
                
                TextField("Plain TextFieldStyle", text: $category)
                    .textFieldStyle(.plain)
                
                TextField("Automatic TextFieldStyle", text: $type)
                    .textFieldStyle(.automatic)
                
            }.padding(.top, 20)
        }.padding()
    }
}