TechnologiesSwiftUIPickers and Text Fields

PlainTextFieldStyle struct

iOSmacOStvOSwatchOSvisionOSiOS 13.0+✓ renders

A text field style with no decoration.

How it works

PlainTextFieldStyle is a concrete TextFieldStyle that draws a text field with no decoration of its own — no border, no background fill, no rounded chrome. Reach for it when you want a field to read as plain editable text that inherits the look of its surrounding layout, rather than presenting the framed input box you'd get from the default or rounded styles. It's the style to apply when the text field is one element in a custom-composed form and you want to supply your own visual treatment, or none at all. You apply it through the textFieldStyle(_:) modifier, never by constructing the field's appearance by hand.

  1. Apply it with textFieldStyle(_:)

    TextFieldStyle is set on a TextField through the textFieldStyle(_:) modifier, which takes a style value and propagates it to every text field in the modified view hierarchy. In the example the field's chrome is chosen by .textFieldStyle(PlainTextFieldStyle()), attached directly to the TextField("Enter name", text: $name).

  2. Construct the style value

    PlainTextFieldStyle is a struct you instantiate with its no-argument initializer; it carries no configuration of its own, because its whole job is to add nothing. Passing PlainTextFieldStyle() tells SwiftUI to render the field without a visible border or background, so the editable text sits flush in the layout.

  3. Let the surrounding layout supply the look

    Because the plain style contributes no frame, the field's visual context comes entirely from the views around it. Here the TextField lives in a VStack between a caption Text("Your name") and a headline Text, and the group's .padding() provides the only inset — the plain style means the field doesn't compete with that composition.

  4. Keep editing and binding behavior intact

    Switching styles changes only presentation, not function: the field still reads and writes through its binding. The two-way $name binding keeps @State private var name in sync as you type, which is why the live Text("Hello, \(name)!") updates regardless of which TextFieldStyle is in effect.

Try it — Change .textFieldStyle(PlainTextFieldStyle()) to .textFieldStyle(.roundedBorder) to see the bordered box that PlainTextFieldStyle deliberately removes.

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.

PlainTextFieldStyle.swift
struct PlainTextFieldStyleDemo: View {
    @State private var name = "Ada"
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Text("Your name")
                .font(.caption)
                .foregroundColor(.secondary)
            TextField("Enter name", text: $name)
                .textFieldStyle(PlainTextFieldStyle())
            Text("Hello, \(name)!")
                .font(.headline)
        }
        .padding()
    }
}
Live preview
Your name Ada Hello, Ada!
Your name Ada Hello, Ada!
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →