TechnologiesSwiftUI

TabContentBuilder struct

iOSmacOStvOSwatchOSvisionOSiOS 18.0+✓ renders

A result builder that constructs tabs for a tab view that supports

How it works

TabContentBuilder is the result builder that assembles the contents of a TabView from a sequence of tab declarations. When you write a list of Tab values inside a TabView's trailing closure, the compiler hands that closure to TabContentBuilder, which gathers the individual tabs into a single composite value the tab interface can present. Reach for it implicitly whenever you build a multi-tab interface declaratively: you express which tabs exist and what each one shows, and the builder turns that into the structured tab content SwiftUI renders.

  1. Declare tabs in a TabView's content closure

    TabContentBuilder is applied automatically to the closure you pass to TabView, so each statement inside the braces becomes one piece of tab content. In the example the three Tab declarations sit directly in the TabView closure, and the builder combines them into the ordered set of tabs the view displays.

  2. Provide a Tab for each destination

    The builder accepts Tab values as its building blocks; each Tab pairs a label and an identifying value with the view to show when it is active. Here Tab("Home", systemImage: "house", value: 1) and its siblings supply the title text, an SF Symbol for the tab item, and the content view such as Text("Home").

  3. Tie each Tab to a selection value

    Because the builder preserves the value you attach to every Tab, those values become the identities a selection binding can match against. The example gives each Tab a distinct value (1, 2, 3) so the TabView(selection: $selection) binding can track and drive which tab is current through the selection state.

  4. Let the builder order and present the result

    The composite value TabContentBuilder produces carries the tabs in the order you wrote them, which is the order the tab bar shows them. Reordering the Tab statements in the closure reorders the tabs onscreen, and adding another Tab simply extends the same builder-produced content.

Try it — Add a fourth Tab("Settings", systemImage: "gear", value: 4) { Text("Settings") } after the Profile tab to watch the builder fold an extra destination into the same tab interface.

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.

TabContentBuilder.swift
struct TabContentBuilderDemo: View {
    @State private var selection = 1
    var body: some View {
        TabView(selection: $selection) {
            Tab("Home", systemImage: "house", value: 1) {
                Text("Home")
                    .font(.title)
                    .padding()
            }
            Tab("Search", systemImage: "magnifyingglass", value: 2) {
                Text("Search")
                    .font(.title)
                    .padding()
            }
            Tab("Profile", systemImage: "person", value: 3) {
                Text("Profile")
                    .font(.title)
                    .padding()
            }
        }
    }
}
Live preview
Home Home Home Search Profile
Home Home Home Search Profile
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →