TechnologiesSwiftUI

RoundedBorderTextEditorStyle struct

iOSmacOStvOSwatchOSvisionOS✓ renders

A text editor style with a system-defined rounded border.

How it works

RoundedBorderTextEditorStyle is the built-in TextEditorStyle that draws a TextEditor inside a rounded rectangular border, giving multi-line text entry the same framed, inset appearance that roundedBorder provides for a single-line TextField. Rather than constructing the type directly, you select it through the static .roundedBorder member and apply it with the textEditorStyle(_:) modifier. Reach for it when you want a TextEditor to read as a distinct, clearly bounded input field — for notes, comments, or message composition — instead of the borderless automatic style that blends into the surrounding layout.

  1. Bind editable text into a TextEditor

    A TextEditor needs a Binding<String> so edits flow back to your state; the style only governs appearance, not the text storage. Here the editor is created with TextEditor(text: $note), bound to the @State private var note that holds the current contents.

  2. Apply the style with textEditorStyle(_:)

    The textEditorStyle(_:) view modifier is how any TextEditorStyle is installed on an editor. Calling .textEditorStyle(.roundedBorder) on the TextEditor swaps the default automatic style for the rounded-border presentation.

  3. Resolve the style through the .roundedBorder shorthand

    Because TextEditorStyle exposes RoundedBorderTextEditorStyle as the static property roundedBorder, you write the dotted shorthand instead of naming the struct. The .roundedBorder in .textEditorStyle(.roundedBorder) is exactly that member, so type inference supplies the RoundedBorderTextEditorStyle value for you.

  4. Give the framed editor a stable size

    The rounded border wraps the editor's content region, so the visible frame is defined by the layout you hand it. Constraining the editor with .frame(height: 140) fixes the height of the bordered box, keeping the field a consistent shape regardless of how much text note holds.

Try it — Change .textEditorStyle(.roundedBorder) to .textEditorStyle(.automatic) and compare: the border and inset disappear, revealing exactly what RoundedBorderTextEditorStyle adds.

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.

RoundedBorderTextEditorStyle.swift
struct RoundedBorderTextEditorStyleDemo: View {
    @State private var note = "Type your meeting notes here..."

    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Text("Notes")
                .font(.headline)
            TextEditor(text: $note)
                .textEditorStyle(.roundedBorder)
                .frame(height: 140)
        }
        .padding()
    }
}
Live preview
Notes Type your meeting notes here...
Notes Type your meeting notes here...
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →