How it works
TextFieldStyle is the protocol that defines the visual appearance and interaction behavior of a text field in SwiftUI. Rather than configuring borders, backgrounds, and decoration on each TextField directly, you select a conforming style and let the framework apply a consistent, platform-appropriate look. Reach for it whenever you want a text field's chrome to match a particular context — a bordered field in a form, an undecorated field embedded in a custom layout — without hand-building that appearance yourself.
Apply a style with textFieldStyle(_:)
You don't conform to TextFieldStyle directly in everyday code; instead you pass a concrete style to the textFieldStyle(_:) modifier on a TextField. The modifier accepts any type conforming to the protocol and propagates the chosen appearance to the field it's attached to, as with
.textFieldStyle(.roundedBorder)on theTextField("Name", text: $name).Choose the rounded-border style
The
.roundedBorderstyle draws the system's standard outlined text field — a rounded rectangle border that signals an editable region. It's the conventional choice for forms and settings, and here it frames the name field so the input area reads clearly against the surroundingVStack.Choose the plain style
The
.plainstyle strips away the border and decoration, leaving just the editable text and placeholder. Use it when the field lives inside a container that already provides visual structure, as with.textFieldStyle(.plain)on theTextField("Email", text: $email), letting the field blend into a custom design.Style each field independently
Because textFieldStyle(_:) attaches to an individual TextField, sibling fields can carry different styles in the same hierarchy. The name and email fields sit side by side in one
VStack, yet one renders with.roundedBorderand the other with.plain, demonstrating that the style is a per-field decision.
.textFieldStyle(.plain) on the email field to .textFieldStyle(.roundedBorder) and watch the previously borderless field gain the same outlined frame as the name field.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct TextFieldStyleDemo: View {
@State private var name = "Taylor"
@State private var email = ""
var body: some View {
VStack(spacing: 16) {
TextField("Name", text: $name)
.textFieldStyle(.roundedBorder)
TextField("Email", text: $email)
.textFieldStyle(.plain)
}
.padding()
}
}