How it works
A TextEditor is a view that displays and lets the reader edit a long-form, multiline span of plain text. Where TextField is built for a single line of input, reach for TextEditor when you need a scrolling, wrapping text area for notes, comments, descriptions, or any free-form body of text. It binds directly to a string in your model and keeps that string in sync as the user types.
Bind the editor to a string with TextEditor(text:)
The sole initializer takes a Binding<String>, so the view is the source of truth for whatever text it shows and every keystroke writes straight back through that binding. In the example, TextEditor(text: $text) is bound to the @State property text, so the seeded value "Type your notes here..." appears immediately and edits flow back into text.
Drive the content with @State
Because the initializer wants a two-way binding, you back the editor with mutable storage and pass its projected value. Here @State private var text holds the current contents and $text hands the binding to TextEditor, letting the view both read and update it without any delegate or callback.
Give the editor a size with frame(height:)
TextEditor is greedy and will expand to fill the space offered to it, so you usually constrain it. Applying .frame(height: 160) fixes the visible editing area to 160 points tall while the text scrolls internally once it overflows that height.
Make the editing area visible with border(_:)
A bare TextEditor draws no chrome of its own, which can leave its bounds ambiguous. Adding .border(Color.gray) outlines the editor's frame so the reader can see exactly where the tappable, editable region begins and ends.
@State private var text = "Type your notes here..." to @State private var text = "", and the editor will start blank and grow its scrollable content as you type.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 TextEditorDemo: View {
@State private var text = "Type your notes here..."
var body: some View {
VStack(alignment: .leading) {
Text("Notes")
.font(.headline)
TextEditor(text: $text)
.frame(height: 160)
.border(Color.gray)
}
.padding()
}
}