Skip to content

Text Field Enhancements (SwiftUI)

A SwiftUI guide for coding agents. Also covers multiline textfield, textfield axis vertical, textselection binding, textinputsuggestions macos, writing tools behavior, read selected text.

Four newer TextField APIs: the axis parameter for multiline growth, a selection binding of type TextSelection, macOS input suggestions, and control over Apple's Writing Tools.

Grow with the text: the axis parameter

Pass axis: .vertical and the field enlarges to fit its content. When it cannot grow further, it scrolls along that axis. This replaces the old wrap-a-TextEditor tricks.

TextField("Very long text", text: $text, axis: .vertical)

Read and write the selection

The selection parameter binds to a TextSelection?. SwiftUI fills it when the user selects text; set it yourself to select programmatically. TextEditor supports the same API.

@State private var selection: TextSelection?

TextField("Very long text here", text: $text, selection: $selection)
  .onChange(of: selection) {
    if let selection = selection.take(),
       case let .selection(range) = selection.indices {
      print(text[range])
    }
  }

Suggestions under the field (macOS only)

textInputSuggestions shows a @ViewBuilder list under the field. A tap inserts the string given by textInputCompletion, not the label text.

TextField("Search", text: $text)
  .textInputSuggestions {
    Label("Suggestion 1", systemImage: "01.circle")
      .textInputCompletion("text1")
    Label("Suggestion 2", systemImage: "02.circle")
      .textInputCompletion("text2")
  }

Writing Tools

Apple's Writing Tools attach to every text field automatically. Limit or disable them per field with writingToolsBehavior, for example .limited.

TextField("Very long text here", text: $text)
  .writingToolsBehavior(.limited)

Use this guidance in your coding agent

Install the Better Design MCP once. Your agent then loads this page with one call.

get-swiftui-guide({ topic: "swiftui-text-field-enhancements" })
claude mcp add --scope user better-design --transport http https://better-design.com/api/mcp --header "Authorization: Bearer <YOUR_API_KEY>"
Browse related design systems