How to let users pick options from a menu

Paul Hudson @twostraws September 3rd 2021

Updated for Xcode 14.0 beta 1

Updated in iOS 15

SwiftUI’s Picker view has a dedicated style called .menu that shows a popup menu of its options, with the label for the picker being shown as a tappable button. The menu itself will automatically show a checkmark next to the currently selected option, and can display upwards or downwards depending on the position of the picker on-screen.

To demonstrate this, we could make a small menu button to let the user select a paint color:

struct ContentView: View {
    @State private var selection = "Red"
    let colors = ["Red", "Green", "Blue", "Black", "Tartan"]

    var body: some View {
        VStack {
            Picker("Select a paint color", selection: $selection) {
                ForEach(colors, id: \.self) {
                    Text($0)
                }
            }
            .pickerStyle(.menu)

            Text("Selected color: \(selection)")
        }
    }
}

Download this as an Xcode project