TabView struct

How it works

A TabView presents top-level views in a tabbed interface, letting people switch between peer sections of your app by selecting items along a tab bar. Reach for it when your content divides into a handful of distinct, equally important areas — a home feed, a search screen, a profile — that each deserve their own persistent destination rather than a hierarchical drill-down. The view manages the bar, the selected tab, and the transition between pages for you, so you supply the content and describe each tab's appearance.

1. Build the tabs in the content closure

   TabView's trailing closure is a view builder: each top-level view you place inside becomes one tab, in order. Here the three Text views — Text("Your home feed"), Text("Search anything"), and Text("Your profile") — are the page content for three tabs.

2. Describe each tab with tabItem(_:)

   Apply the .tabItem modifier to a tab's content view to declare how that tab appears in the bar. The closure returns the bar entry; TabView reads it to render the tab and otherwise stays out of the way of the page content itself.

3. Use Label for a tab's icon and title

   A tab item is typically a Label pairing text with an SF Symbol, which TabView lays out as the standard icon-over-title bar entry. The example marks its tabs with Label("Home", systemImage: "house"), Label("Search", systemImage: "magnifyingglass"), and Label("Profile", systemImage: "person.circle").

4. Let the bar track the selected tab

   With no binding supplied, TabView manages selection internally — tapping a tab item swaps in that tab's page and highlights its Label. To drive or observe the active tab from your own state, use the initializer that takes a selection binding and tag each tab.