SwiftUI.cc
Snippets
PresentationControls ModifiersIntermediate

SwiftUI Toolbar and ControlGroup Actions

Place primary and secondary commands in toolbars with predictable placement, grouping, tinting, and keyboard-aware behavior.

4 min readUpdated 2026-06
Grouped editor controls
import SwiftUI

struct NoteEditor: View {
    var body: some View {
        TextEditor(text: .constant("Draft"))
            .navigationTitle("Note")
            .toolbar {
                ToolbarItem(placement: .topBarTrailing) {
                    ControlGroup {
                        Button("Undo", systemImage: "arrow.uturn.backward") {}
                        Button("Redo", systemImage: "arrow.uturn.forward") {}
                    }
                }

                ToolbarItem(placement: .keyboard) {
                    Button("Done") { hideKeyboard() }
                }
            }
    }
}
Use this when

A screen has commands that belong to navigation chrome rather than inline content.

Related icon buttons should be grouped with consistent platform spacing.

Keyboard controls should appear above the software keyboard.

Avoid this when

The action is part of a form row and should stay near the field it affects.

You need a large custom layout; an inline command bar may be clearer.

Toolbar placement would hide the action on a target platform you support.

Implementation notes

Toolbar placement is a request to the platform; verify the result on every device family you target.
ControlGroup is useful when several compact controls work as one editing cluster.
Use system images and accessibility labels for icon-only toolbar buttons.

Checklist

Keep primary actions easy to reach.

Do not overload the toolbar with every possible command.

Preview with large titles and inline titles.

Related reference