Picker in SwiftUI

The Picker is a SwiftUI view that presents a set of options for the user to choose from. It can be displayed as a dropdown menu, a segmented control, or a wheel, depending on the context and the number of options available.

Use Case: Picker

A common use case for Picker is to allow users to select a value from a predefined list. For example, you might use a Picker to let users choose their favorite fruit from a list of options.

Set up Picker cases

We need to define the options for our picker. In this case, we'll create an enum for the different themes.

We conform it to String and add conformance to CaseIterable (to support .allCases) and Identifiable (so that we can use it in a ForEach loop)

enum Theme: String, CaseIterable, Identifiable {
    case light = "Light"
    case dark = "Dark"
    case system = "System Default"

    var id: String { self.rawValue }
}

Picker View

struct PickerView: View {
    @State private var selectedTheme: Theme = .light
    var body: some View {
        Form {
            Section("Default/Automatic") {
                Picker("Select Theme", selection: $selectedTheme) {
                    ForEach(Theme.allCases) { theme in
                        Text(theme.rawValue)
                            .tag(theme)
                    }
                }
                .pickerStyle(.automatic)
            }
        }
    }
}

Different Picker styles

The Picker can be styled in various ways to suit different use cases. Here are some of the available styles:

In this code example, we create a PickerView that demonstrates the different picker styles:

struct PickerView: View {
    @State private var selectedTheme: Theme = .light
    var body: some View {
        NavigationStack {
            Form {
                Section("Default/Automatic") {
                    Picker("Select Theme", selection: $selectedTheme) {
                        ForEach(Theme.allCases) { theme in
                            Text(theme.rawValue)
                                .tag(theme)
                        }
                    }
                    .pickerStyle(.automatic)
                }

                Section(".menu") {
                    Picker("Select Theme", selection: $selectedTheme) {
                        ForEach(Theme.allCases) { theme in
                            Text(theme.rawValue).tag(theme)
                        }
                    }
                    .pickerStyle(.menu)
                }

                Section(".segmented") {
                    Picker("Select Theme", selection: $selectedTheme) {
                        ForEach(Theme.allCases) { theme in
                            Text(theme.rawValue).tag(theme)
                        }
                    }
                    .pickerStyle(.segmented)
                }

                Section(".navigationLink") {
                    Picker("Select Theme", selection: $selectedTheme) {
                        ForEach(Theme.allCases) { theme in
                            Text(theme.rawValue).tag(theme)
                        }
                    }
                    .pickerStyle(.navigationLink)
                }

                Section(".palette") {
                    Picker("Select Theme", selection: $selectedTheme) {
                        ForEach(Theme.allCases) { theme in
                            Text(theme.rawValue).tag(theme)
                        }
                    }
                    .pickerStyle(.palette)
                }

                Section(".inline") {
                    Picker("Select Theme", selection: $selectedTheme) {
                        ForEach(Theme.allCases) { theme in
                            Text(theme.rawValue).tag(theme)
                        }
                    }
                    .pickerStyle(.inline)
                }

                Section(".inline & labelsHidden") {
                    Picker("Select Theme", selection: $selectedTheme) {
                        ForEach(Theme.allCases) { theme in
                            Text(theme.rawValue).tag(theme)
                        }
                    }
                    .pickerStyle(.inline)
                    // I'd suggest to hide the "labels" it looks cleaner when using .inline
                    .labelsHidden()
                }

                Section(".wheel") {
                    Picker("Select Theme", selection: $selectedTheme) {
                        ForEach(Theme.allCases) { theme in
                            Text(theme.rawValue).tag(theme)
                        }
                    }
                    .pickerStyle(.wheel)
                }
            }
        }
    }
}

This is a screenshot of the different picker styles in action.

Conclusion

Pickers are a powerful way to allow users to select from a range of options in a SwiftUI application. By utilizing the various picker styles available, you can create a more intuitive and user-friendly interface.

Resources:

• https://developer.apple.com/documentation/swiftui

• https://developer.apple.com/documentation/swiftui/picker

• https://developer.apple.com/documentation/swiftui/pickerstyle

• https://developer.apple.com/documentation/swiftui/forEach

• https://developer.apple.com/documentation/swiftui/state

• https://developer.apple.com/documentation/swiftui/pickerstyle/automatic

• https://developer.apple.com/documentation/swiftui/pickerstyle/menu

• https://developer.apple.com/documentation/swiftui/pickerstyle/segmented

• https://developer.apple.com/documentation/swiftui/pickerstyle/navigationlink

• https://developer.apple.com/documentation/swiftui/pickerstyle/palette

• https://developer.apple.com/documentation/swiftui/pickerstyle/inline

• https://developer.apple.com/documentation/swiftui/pickerstyle/wheel

Read more

• ViewThatFits • 4 minutes reading time.
• How to monitor network in SwiftUI • 3 minutes reading time.
• Placing components within the Safe Area Inset • 3 minutes reading time.

Share