Pickers, provided by SwiftUI, are essential elements of an iOS app, allowing users to enter basic details and choose between multiple options.

This article will look at Pickers in detail, explaining how each key type is declared, configured, and styled. Want to jump to a particular section? Here’s the full table of contents.

Types of SwiftUI Pickers

SwiftUI Pickers fall into two distinct streams:

• Regular, and more configurable Pickers,
• Specialised DatePicker and ColorPicker.

We’ll take you through each of them (and their sub-variants) in detail, going deep into:

• How they look.
• How to use them.
• How to change the picker style.

SwiftUI Picker View

The regular SwiftUI Picker view can be used for all kinds of things, including:

• Switching between light and dark mode.
• Filtering content by date, popularity etc.
• Providing personal information (as an alternative to free-text fields).

We can feed this view with the custom options we want it to include. Usually, the options are either a collection or array of items.

This is what a simple declaration of a regular Picker view could look like:

struct Pickers: View {
    @State private var selected: String = ""
    
    private let selectionOptions = [ //This is the list of values we'll use
        "my first option",
        "my second option",
        "my third option"
		]
    
    var body: some View {
            Picker("Picker Name", //This is the picker's title
									 selection: $selected, //This is the binding variable
									 content: {
											ForEach(selectionOptions, id: \\.self) { 
		                    Text($0)
			                }
				            })
}

Elements of a Picker declaration

There are three main elements to a Picker declaration:

• The Title – Which can be a string or a label.
• The Binding Variable – This is where the picker value is stored when it changes.
• The Value List – This is where we’ll find the values that will be shown to the user.

In this example, the selected value will be stored via a binding value to the selected state variable.

SwiftUI Picker Styles

One of the things we love about Pickers is their flexibility. You can change the default picker style simply by adding the modifier .pickerStyle() to the Picker.

So let’s have a look at the available styles and check how they’re shown and used.

Menu Picker

We use Menu Pickers in all kinds of scenarios where we want to give the user a list of options. For example:

• So the user can sort by name, date or price.
• So the user can filter by status or category.
• So the user can choose between playback speed, image resolution or other display variables.

The Menu Picker can be declared by adding the .pickerStyle(.menu) to our Picker. It would look like:

Important to note: MenuPickerStyle is the default picker style on iOS. You can also pass it explicitly as .pickerStyle(MenuPickerStyle()).

Inline Picker

The Inline Picker is very similar to the Menu Picker we’ve just seen. The main difference is that instead of it being a collapsed list of options, it presents the entire list with all available choices.

To declare an Inline Picker, we simply need to add the .pickerStyle(.inline) to our Picker.

Wheel Picker

Wheel Pickers are those classic wheels which we have to rotate to select a certain option. They’re usually way more space-efficient than Inline Pickers when we have a long list of options, making them the obvious selection in those cases.

Declaring one is simple: we simply need to add .pickerStyle(.wheel) to our Picker.

Segmented Picker

Segmented Pickers are displayed in a horizontal row, usually called Segmented Control in iOS apps. They’re a great choice when we want to subdivide a view based on the chosen option, and when users need to switch between a small number of closely related options quickly and frequently.

Again, the declaration process is simple: we merely need to add the .pickerStyle(.segmented) to our Picker.

Navigation Link Picker

The Navigation Link Picker consists of a single line which, when tapped, takes the user to a new screen with all available options. Once one of the options is selected, it automatically pops to the previous screen while maintaining the selection.

To declare one of these options, we simply need to add the .pickerStyle(.navigationLink) to our Picker.

The biggest difference between Navigation Link and other Pickers is that it needs to be contained within a Navigation Stack. Others merely need to be inside a List or Form.

SwiftUI Date Picker

Date Pickers are specialised types of Pickers. They’re very simple to use and they’re particularly useful when we need to ask our users to specify Dates.

While we can configure our own custom Picker, using any of the styles we’ve seen previously, to allow us to request Dates, Date Pickers provide the default method. Unless we have a really custom implementation that requires a specific Picker, we will very likely use a Date Picker for anything Date-related.

Like the other Pickers, they come bundled with different styles for use in a variety of situations. Let’s dig into them now.

Wheel Date Pickers

Wheel Date Pickers are the classical (and most common) way to let a user pick a date. Your users will certainly have dealt with them in the past, so they have the advantage of familiarity.

We configure them using the following date picker style: .datePickerStyle(WheelDatePickerStyle()).

Graphical Date Picker

The Graphical Date Picker is a very convenient way to let our users pick a specific date, from the year right down to the minute.

This picker does take up some space by default, but it’s a great option when we want to get granular about a certain date and time.

To use a Graphical Date Picker, we simply need to configure our Picker with .datePickerStyle(GraphicalDatePickerStyle()). This style requires iOS 14 or later, which covers all actively supported iOS versions as of 2026.

Compact Date Picker

The Compact Date Picker, available since the release of iOS 13.4 in March 2020, is a more space-efficient alternative to the Graphical Date style we showed above. It gives us granular control over date and time, and it means we don’t need to use much UI real estate to present the Picker to the user.

When the user selects one of the components, which will be either date or time, the app displays a small context popup and allows the user to specify the exact date/time. Like the previous examples, it can be used by adding .datePickerStyle(CompactDatePickerStyle()) to our Picker.

SwiftUI Color Picker

The Color Picker is a dedicated picker for color selection, available since iOS 14, which lets users choose from a system-provided palette without any custom implementation.

The Color Picker is a dedicated picker for color selection, available since iOS 14, which lets users choose from a system-provided palette without any custom implementation.

In a way, this is simpler than all the Pickers displayed above: it doesn’t even have a style property! Very simple to declare and use, it facilitates a seamless experience that we can easily implement in our apps.

SwiftUI Picker FAQ

What is a SwiftUI Picker?

A SwiftUI Picker is a user interface control that allows users to select an option from a list of choices. It provides a way for users to make selections in a visually appealing and intuitive manner.

How do I create a Picker in SwiftUI?

To create a Picker in SwiftUI, you can use the SwiftUI Picker view along with a data collection and a closure that defines the content of each option. You can customize the appearance and behavior of the Picker using a variety of modifiers.

Can I customize the style of a SwiftUI Picker?

Yes, you can customize the style of a SwiftUI Picker to match the needs of your SwiftUI app. SwiftUI provides various built-in styles such as WheelPickerStyle, SegmentedPickerStyle, and MenuPickerStyle. You can also create your own custom styles using Swift UI’s declarative APIs and modifiers.

How can I set the default value of a SwiftUI Picker?

To set the default value of a SwiftUI Picker, you can use the @State property modifier to create a binding to a selected value. By initializing the binding with a default value, the Picker will automatically display that value when it first appears.

Can I make SwiftUI Picker options mutually exclusive?

Yes, you can make SwiftUI Picker options mutually exclusive by using the tag(_:selection:) modifier. By providing a unique tag value for each option and binding the Picker’s selected value to a variable, only one option can be selected at a time.

How can I change the style of a SwiftUI Picker dynamically?

To change the style of a SwiftUI Picker dynamically, you can use conditional modifiers. By applying different styles based on certain conditions, you can provide a dynamic user experience and enhance the visual appearance of your app.

Can a SwiftUI Picker display images or symbols?

Yes, a SwiftUI Picker can display images or symbols alongside or instead of text options. You can use the label parameter of the Picker’s content closure to provide custom views, such as images or SF Symbols, for each option in the Picker.

import SwiftUI

struct ImagePickerView: View {
    @State private var selectedSymbol: String = "circle"
    let symbols = ["circle", "square", "triangle"]

    var body: some View {
        Picker("Select a symbol", selection: $selectedSymbol) {
            ForEach(symbols, id: \\.self) { symbol in
                HStack {
                    Image(systemName: symbol)
                    Text(symbol.capitalized)
                }
                .tag(symbol)
            }
        }
        .pickerStyle(SegmentedPickerStyle()) // You can choose the style that suits your UI
    }
}

struct ImagePickerView_Previews: PreviewProvider {
    static var previews: some View {
        ImagePickerView()
    }
}

To sum up

SwiftUI Pickers are great tools that provide us with clear selection mechanisms for every single type of option we may need to display to our users. As an iOS developer writing a SwiftUI app, it’s important that you get a good understanding of using SwiftUI Pickers, because it’s one of the most basic user interface interactions in any iOS app.

There are three main types of Pickers:

• The Picker
• The Date Picker
• The Color Picker

While we can do everything by customizing a Picker, it is wise to use one of the other two types when we need Dates/Colors.

We’ve also looked into the many sub-variants of each, and hopefully, with the animated GIFs that show up alongside to illustrate how they’re configured, these examples can help you understand which one is needed for your specific implementation.

SwiftUI Pickers are one of the most commonly used UI elements in iOS apps. To see them in action inside real layouts, check out our guides on SwiftUI Forms and SwiftUI Lists.

Happy coding!