How to let users pick options from a menu
Updated for Xcode 16.4
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
Important: If you’re using Xcode 12, you need to use MenuPickerStyle() rather than .menu.
SAVE 50% All our books and bundles are half price for Black Friday, so you can take your Swift knowledge further for less! Get my all-new book Everything but the Code to make more money with apps, get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn Swift Testing, design patterns, and more.
Similar solutions…
- Building a menu using List
- How to show a menu when a button is pressed
- How to show a context menu
- How to let users import videos using PhotosPicker
- How to let users delete rows from a list
