TechnologiesSwiftUIPickers and Text Fields

PickerStyle protocol

iOSmacOStvOSwatchOSvisionOSiOS 13.0+✓ renders

A type that specifies the appearance and interaction of all pickers within

How it works

PickerStyle defines the appearance and interaction model of a picker, letting you choose among presentations like a segmented control, a pop-up menu, or an inline list without changing the picker's data or selection binding. Rather than conforming to the protocol yourself, you select one of SwiftUI's built-in styles and apply it with the pickerStyle(_:) modifier. Reach for it when the default picker presentation doesn't fit a screen's density or platform conventions, or when you want a control's look to adapt to the container it sits in.

  1. Apply a style with the pickerStyle(_:) modifier

    PickerStyle takes effect through the pickerStyle(_:) view modifier, which you attach to a Picker. The modifier sets the style for that picker and any pickers nested below it in the view tree. In the example, each Picker over flavors is given its own presentation by a separate .pickerStyle call.

  2. Pick a concrete style value

    You don't construct a PickerStyle directly; instead you pass one of the standard conforming values exposed as static members. The example reaches for three: .segmented renders a horizontal segmented control, .menu presents the choices in a pop-up menu, and .inline lays the options out directly within the surrounding container.

  3. Keep the selection binding independent of the style

    The chosen PickerStyle only governs presentation, so the picker's selection: binding and its content stay the same across styles. Here every Picker drives the same $flavor state through identical ForEach options, and switching from .segmented to .menu to .inline changes how the control looks while the bound value continues to flow unchanged.

  4. Let the container shape automatic behavior

    Some styles, including the default .automatic, resolve their final look from the context the picker lives in, such as a Form, list, or toolbar. Placing the pickers inside Form gives SwiftUI the surrounding layout it uses to render row-style and inline presentations appropriately on each platform.

Try it — Change the first .pickerStyle(.segmented) to .pickerStyle(.wheel) to see the same flavors binding presented as a spinning wheel instead of a segmented control.

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.

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

    var body: some View {
        Form {
            Picker("Segmented", selection: $flavor) {
                ForEach(flavors, id: \.self) { Text($0) }
            }
            .pickerStyle(.segmented)

            Picker("Menu", selection: $flavor) {
                ForEach(flavors, id: \.self) { Text($0) }
            }
            .pickerStyle(.menu)

            Picker("Inline", selection: $flavor) {
                ForEach(flavors, id: \.self) { Text($0) }
            }
            .pickerStyle(.inline)
        }
        .padding()
    }
}
Live preview
Vanilla Chocolate Strawberry
Vanilla Chocolate Strawberry
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →