Add checkmark when SwiftUI menu item is selected

In this tutorial, we will see how to add a checkmark when we select an option from a menu in SwiftUI.

Menus can have checkmarks to show which option we have selected. This helps us to see our choices easily and quickly.

Add checkmark in front of the option

We can create a menu with selectable options by using the Picker within the Menu, it provides the checkmark feature by default.

So, when we select an option it will have a checkmark in front of the selected option.

Example

import SwiftUI

struct ContentView: View {
    // Define an array of menu colors as strings
    @State var menuColors: [String] = ["Red", "Orange", "Blue", "Yellow"]
    
    // Define a state variable to store the selected option
    @State var selectedOption = ""
    
    var body: some View {
        // Create a vertical stack of views
        VStack {
            // Create a menu with a picker inside
            Menu {
                // Create a picker with a label and options
                Picker("Select an Option", selection: $selectedOption) {
                    // Iterate through each color in the menuColors array
                    ForEach(menuColors, id: \.self) { option in
                        // Display each color as a text option in the picker
                        Text(option)
                    }
                }
            } label: {
                // Display a text label for the menu
                Text("Menu")
                    .font(.title)
            }
        }
    }
}

In the above program, I have used the Menu to create a dropdown menu.

Then within the Menu, I have used the Picker to display and select options from the dropdown menu.

Output:

Add circular checkmark next to the option

We can also modify and change the position of the checkmark. For example, we can display a circular checkmark and show the checkmark next to the option of the Menu.

We can display a circular checkmark by using the SF Symbol within the Menu property.

Example

import SwiftUI

struct ContentView: View {
    // Array containing color options
    let colorOptions = ["Red", "Orange", "Blue", "Yellow"]
    
    // State property to hold the selected color option
    @State private var selectedOption: String?

    var body: some View {
        // Menu view with a label and a list of options
        Menu {
            ForEach(colorOptions, id: \.self) { option in
                // Button for each color option
                Button(action: {
                    // Set the selectedOption when a color option is tapped
                    self.selectedOption = option
                }) {
                    HStack {
                        // Display the color option text
                        Text(option)
                        
                        // Show a checkmark icon if the option is selected
                        if selectedOption == option {
                            Spacer()
                            Image(systemName: "checkmark.circle")
                        }
                    }
                }
            }
        } label: {
            // Text label for the Menu
            Text("Menu")
                .font(.title)
        }
    }
}

In the above program, I have used the ForEach loop to iterate through the colorOptions to create items for the menu based on colorOptions array.

Then, I have created Button to represent each color option as a button. The button action will set the selectedOption to the tapped color option. So, when we tap the button it will set the selectedOption to the color that we have selected.

After that, I have used a conditional statement if to check if the current option matches the selectedOption. If true, it will add a checkmark icon to indicate the selection.

Output: