iPhone SwiftUI layouts

Explore SwiftUI APIs, components, and modifiers with interactive iPhone previews, Swift code, and Apple documentation. Compare every available orientation, appearance, and design.

TabView

Value Tab View

Creates a tab view that uses a builder to create and specify selection values for its tabs.

Explore Value Tab View on iPhone in portrait, with SwiftUI code and Apple API documentation.

SwiftUI code

Full details Docs 
@State var selection = "1"

var body: some View {
    let displayedSelection = Text("Selected: \(selection)")

    TabView(selection: $selection) {
        Tab(value: "0") {
            displayedSelection
        }
        Tab("1", systemImage: "1.circle", value: "1") {
            displayedSelection
        }

        Tab("2", image: "cats24x24", value: "2") {
            displayedSelection
        }
        Tab(value: "3") {
            displayedSelection
        } label: {
            Label("3", systemImage: "3.circle")
        }
    }
}

Compatibility

iOS 18.0+ iPadOS 18.0+ macOS 15.0+ watchOS 11.0+ tvOS 18.0+ visionOS 2.0+

Tags

Found an issue or have a suggestion?

All variants

Every available iPhone screenshot for Value Tab View.

2 views