Tab View

macOS 13.3+

Switches between related panes of content in a window with SwiftUI's native tab view.

Native tab view with general and updates panes

import SwiftUI@available(macOS 15.0, *)struct TabViewUsageExample: View {    @State private var showsPreview = true    @State private var opensInNewWindow = false    @State private var checksForUpdates = true    var body: some View {        TabView {            Tab("General", systemImage: "gearshape") {                Form {                    Toggle("Show preview", isOn: $showsPreview)                    Toggle("Open projects in a new window", isOn: $opensInNewWindow)                }            }            Tab("Updates", systemImage: "arrow.down.circle") {                Form {                    Toggle("Check for updates automatically", isOn: $checksForUpdates)                }            }        }        .padding(FLXSpacing.xl)    }}

Usage

On macOS, a tab view groups related settings or details into panes, with the tabs on top. Mac apps use it in settings windows, inspectors, and dialogs, usually with a Form in each pane:

TabView {    Tab("General", systemImage: "gearshape") {        Form { ... }    }    Tab("Updates", systemImage: "arrow.down.circle") {        Form { ... }    }}.padding()

Keep the panes closely related, with up to six tabs, and keep the controls in each pane about that pane only. Leave a margin around the tab view, as in the example.

The main sections of a Mac app don't use a tab view. For those, use a sidebar with NavigationSplitView.

Examples

Settings window

Put a TabView in your app's Settings scene. In the settings window, macOS shows the tabs in the toolbar, with their symbols and titles.

import SwiftUI@available(macOS 15.0, *)struct TabViewSettingsExample: View {    @State private var showsPreview = true    @State private var opensInNewWindow = false    @State private var restoresWindows = true    @State private var appearance = "System"    @State private var iconSize = "Medium"    @State private var checksForUpdates = true    @State private var includesBetas = false    var body: some View {        TabView {            Tab("General", systemImage: "gearshape") {                Form {                    Section {                        Toggle("Show preview", isOn: $showsPreview)                        Toggle("Open projects in a new window", isOn: $opensInNewWindow)                        Toggle("Restore windows at launch", isOn: $restoresWindows)                    }                    Section {                        Picker("Appearance", selection: $appearance) {                            Text("System").tag("System")                            Text("Light").tag("Light")                            Text("Dark").tag("Dark")                        }                        Picker("Sidebar icon size", selection: $iconSize) {                            Text("Small").tag("Small")                            Text("Medium").tag("Medium")                            Text("Large").tag("Large")                        }                    }                }                .formStyle(.grouped)            }            Tab("Updates", systemImage: "arrow.down.circle") {                Form {                    Toggle("Check for updates automatically", isOn: $checksForUpdates)                    Toggle("Include beta versions", isOn: $includesBetas)                }                .formStyle(.grouped)            }        }        .frame(width: 450, height: 260)    }}

@mainstruct MyApp: App {    var body: some Scene {        WindowGroup {            ContentView()        }        Settings {            SettingsView()        }    }}

macOS 13 and 14

Tab needs macOS 15. On earlier versions, put .tabItem(_:) on each pane. It looks the same.

import SwiftUIstruct TabViewTabItemExample: View {    @State private var showsPreview = true    @State private var opensInNewWindow = false    @State private var checksForUpdates = true    var body: some View {        TabView {            Form {                Toggle("Show preview", isOn: $showsPreview)                Toggle("Open projects in a new window", isOn: $opensInNewWindow)            }            .tabItem {                Text("General")            }            Form {                Toggle("Check for updates automatically", isOn: $checksForUpdates)            }            .tabItem {                Text("Updates")            }        }        .padding(FLXSpacing.xl)    }}

Color

The selected tab uses the theme's tint, which .flxTheme(_:) applies at the root of your app.

For more information, see the Human Interface Guidelines for tab views and the Apple documentation.