How it works
TextEditorStyle is the protocol that defines the visual appearance and behavior of a TextEditor view. Rather than reaching for overlays, backgrounds, or border modifiers to dress up a multiline text field, you adopt one of the built-in styles to get a coherent, platform-appropriate look that tracks focus and the surrounding environment. Apply a style when you want a TextEditor to read as a distinct, bounded editing surface, and let the style handle the chrome for you.
Apply a style with textEditorStyle(_:)
The textEditorStyle(_:) modifier is the entry point: you attach it to a TextEditor and pass a value conforming to TextEditorStyle. In the example,
.textEditorStyle(.roundedBorder)is applied directly to theTextEditor(text: $note), swapping the editor's default plain appearance for the bordered one without any other changes to the view.Choose a built-in style value
TextEditorStyle vends static, type-erased values you reference with leading-dot syntax.
.roundedBorderdraws the editor inside a rounded, outlined container that visually separates it from adjacent content, while.plain(or.automatic) gives the unadorned editor. The example selects.roundedBorderso the note area reads as a framed field.Bind the editor to mutable text
A style governs presentation only; the editor still needs a writable text binding to operate on. Here
TextEditor(text: $note)binds to the@State private var noteso typing flows back into state, and the chosen TextEditorStyle simply wraps that live editing surface.Let the style inherit through the environment
Because textEditorStyle(_:) sets the style in the environment, it cascades to TextEditor views nested beneath where you call it, not just the one it's attached to. Applying it on the
TextEditorinside theVStackstyles that editor; lifting the modifier to an enclosing container would style every TextEditor in that subtree uniformly.
.textEditorStyle(.roundedBorder) to .textEditorStyle(.plain) to see the bordered container disappear and the editor blend flush into the VStack.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 TextEditorStyleDemo: View {
@State private var note = "Meeting notes\nDiscuss Q3 roadmap"
var body: some View {
VStack(alignment: .leading, spacing: 12) {
Text("Notes")
.font(.headline)
TextEditor(text: $note)
.textEditorStyle(.roundedBorder)
.frame(height: 140)
}
.padding()
}
}