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.

Picker

Picker

Creates a pickers with title, image, systemImage, and custom label.

Explore Picker on iPhone in portrait, with SwiftUI code and Apple API documentation.

SwiftUI code

Full details Docs 
@State var selection = "1"
let pickerOptions = ["1", "2", "3"]

var body: some View {
    List {
        Picker("Foo", selection: $selection) {
            ForEach(pickerOptions, id: \.self) { option in
                Text(option)
            }
        }
        Picker("Bar", systemImage: "hand.tap", selection: $selection) {
            ForEach(pickerOptions, id: \.self) { option in
                Text(option)
            }
        }
        Picker("Bar", image: .cats24X24, selection: $selection) {
            ForEach(pickerOptions, id: \.self) { option in
                Text(option)
            }
        }
        Picker(selection: $selection) {
            ForEach(pickerOptions, id: \.self) { option in
                Text(option)
            }
        } label: {
            Label("Foo", systemImage: "star")
            Text("Bar")
        }
    }
}

Compatibility

iOS 13.0+ iPadOS 13.0+ macOS 10.15+ watchOS 6.0+ tvOS 13.0+ visionOS 1.0+

Tags

Found an issue or have a suggestion?

All variants

Every available iPhone screenshot for Picker.

2 views