We have already seen adding a border to TextField but if we need a rounded corner border for example, for TextField then we will have to use the overlay modifier instead which gives us an opportunity to add shapes as the border for TextField.
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("Course title", text: $title)
.padding(5)
.overlay(
RoundedRectangle(cornerRadius: 20)
.stroke(Color.orange)
)
TextField("Course category", text: $category)
.padding(5)
.overlay(
RoundedRectangle(cornerRadius: 20)
.stroke(Color.teal)
)
TextField("Course type", text: $type)
.padding(5)
.overlay(
RoundedRectangle(cornerRadius: 20)
.stroke(Color.pink)
)
}.padding(.top, 20)
}.padding()
}
}