TechnologiesSwiftUIPickers and Text Fields

MenuPickerStyle struct

iOSmacOStvOSwatchOSvisionOS✓ renders

A picker style that presents the options as a menu when the user presses a

How it works

MenuPickerStyle presents a picker's choices in a pull-down menu, showing the current selection inline and revealing the full list of options only when the reader taps it. Reach for it when a picker has more than a handful of mutually exclusive options and you want to keep the surrounding layout compact, rather than spending vertical space on a wheel or a row of inline segments. Because it collapses to a single control until activated, it suits forms, toolbars, and dense settings screens where space is at a premium. You rarely name the type directly; instead you select it through the pickerStyle(_:) modifier using the .menu shorthand.

  1. Wrap the choices in a Picker

    MenuPickerStyle styles a Picker, so it has effect only when applied to one. The picker binds the chosen value to state through its selection parameter and lists the options as its content, as in Picker("Flavor", selection: $flavor) with Text rows for each flavor.

  2. Bind the selection and tag each option

    The menu reflects whichever option matches the current binding and writes the reader's pick back to it. Each option must carry a tag whose value matches the binding's type so SwiftUI can identify it, like Text("Vanilla").tag("Vanilla") paired with the @State private var flavor binding $flavor.

  3. Apply the style with pickerStyle(.menu)

    You opt into the menu presentation with the pickerStyle(_:) modifier, passing the .menu style value that resolves to MenuPickerStyle. In the example, .pickerStyle(.menu) is attached to the picker and turns the control into a pull-down that displays flavor and expands to the option list on tap.

  4. Let the label and selection drive the control's appearance

    Unlike inline or wheel styles, the menu shows only the picker's label and the current value when collapsed. The "Flavor" label and the selected flavor stand in for the whole list until activated, which is why MenuPickerStyle stays compact next to other content like the surrounding .padding().

Try it — Change .pickerStyle(.menu) to .pickerStyle(.wheel) and watch the same options spread into an always-visible spinning wheel instead of collapsing into a tappable pull-down.

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.

MenuPickerStyle.swift
struct MenuPickerStyleDemo: View {
    @State private var flavor = "Vanilla"

    var body: some View {
        Picker("Flavor", selection: $flavor) {
            Text("Vanilla").tag("Vanilla")
            Text("Chocolate").tag("Chocolate")
            Text("Strawberry").tag("Strawberry")
        }
        .pickerStyle(.menu)
        .padding()
    }
}
Live preview
Vanilla
Vanilla
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →