TechnologiesSwiftUI

Picker struct

iOSmacOStvOSwatchOSvisionOSiOS 13.0+✓ renders

A control for selecting from a set of mutually exclusive values.

How it works

Use a Picker to let people choose a single value from a set of mutually exclusive options. You bind the picker to a piece of state that holds the current choice, and supply the candidate values as its content; SwiftUI keeps the binding in sync as the selection changes. Reach for Picker whenever the answer is "exactly one of these," rather than free-form text or an on/off toggle. Its appearance adapts to the surrounding context, so the same declaration can render as a wheel, a menu, a segmented control, or an inline list depending on platform and style.

  1. Bind the selection with a Binding

    The selection parameter takes a Binding to the property that stores the chosen value, written with the $ prefix. Here selection: $flavor ties the picker to the @State variable flavor, so picking an option writes the new value back and any view reading flavor updates automatically.

  2. Label the picker

    The first initializer argument provides the picker's label, describing what the choice represents. The string "Flavor" labels this picker; depending on the container and style, it appears as a leading title (as it does inside Form) or is used for accessibility.

  3. Supply options in the content closure

    The trailing closure lists the selectable views, one per option. ForEach(flavors, id: \.self) generates a Text row for each entry in flavors, turning the array into the picker's choices without writing each one by hand.

  4. Identify each option with tag(_:)

    Each option must carry a tag whose type matches the selection binding, so SwiftUI can map a row to a value. Calling .tag(name) on every Text(name) makes each row's identity a String, matching the String selection so the right row shows as selected and the right value is stored.

  5. Choose a presentation with pickerStyle(_:)

    The pickerStyle(_:) modifier controls how the options are presented without changing the binding or content. .pickerStyle(.inline) lays the choices out directly within the Form; swapping in styles like .menu, .segmented, or .wheel changes only the appearance.

Try it — Change .pickerStyle(.inline) to .pickerStyle(.segmented) to see the same Picker and $flavor binding render as a horizontal segmented control instead of an inline list.

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.

Picker.swift
struct PickerDemo: View {
    @State private var flavor = "Vanilla"
    private let flavors = ["Vanilla", "Chocolate", "Strawberry"]

    var body: some View {
        Form {
            Picker("Flavor", selection: $flavor) {
                ForEach(flavors, id: \.self) { name in
                    Text(name).tag(name)
                }
            }
            .pickerStyle(.inline)

            Text("Selected: \(flavor)")
        }
        .padding()
    }
}
Live preview
Selected: Vanilla
Selected: Vanilla
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →