Select multiple options from a Menu in SwiftUI

In this tutorial, we will see how to select multiple options from a Menu in SwiftUI.

We can simply create a multi-selection menu that will let us select multiple options from a menu using the Menu, Button, and @State properties.

First of all, I will define @State variables to manage the selection state and then I will use Menu and Button views to implement the menu functionality.

Now, follow the steps to create a multi-selection Menu in SwiftUI.

Define state variables

First of all, I will define two @State variables to manage the selected options and the available options.

@State private var selectedOptions: Set<String> = []

@State private var options = ["Sam", "Parvez", "Saruque", "Faruque"]

In the above code, I have declared the selectedOptions variable to track the selected option using a set of string.

Then, the options to represent available options in the menu.

Creating a Menu

Now, inside the body property, I will create the menu using the Menu view to display the list of options.

Menu {
    // Options in the menu
} label: {
    // Label for the menu
}

In the above program, I have used the Menu view to create a dropdown menu with options inside it.

The label will define the label for the menu.

Options in the menu

Here, I will use a ForEach loop to create options for the menu based on the options array.

ForEach(options, id: \.self) { option in
    Button(action: {
        // Button action
    }) {
        // Content of each button
    }
}

In the above program, I have created Button for each option with an action (that will be defined below) to toggle selection.

Button action

In the button action, I will check whether the selectedOptions set contains a particular option. If the option is already in the set it will be deleted otherwise, it will be added.

if selectedOptions.contains(option) {
    // If the option is already selected, remove it from the set
    selectedOptions.remove(option)
} else {
    // If the option is not selected, add it to the set
    selectedOptions.insert(option)
}

The above code will toggle the selection of the option within the selectedOptions set.

Content of each button

Now, I will use the SF Symbol to add checkmark for the every selected option.

if selectedOptions.contains(option) {
    // If the option is already selected, display a checkmark
    Image(systemName: "checkmark")
}
Text(option) //To displays the text of the option.

In the above program, I have used a SF Symbol that is checkmark. This checkmark will be displayed next to the selected option.

Now have a look at the complete code below.

import SwiftUI

struct ContentView: View {
    @State private var selectedOptions: Set<String> = []
    
    @State private var options = ["Sam", "Parvez", "Saruque", "Faruque"]

    var body: some View {
        Menu {
            ForEach(options, id: \.self) { option in
                Button(action: {
                    if selectedOptions.contains(option) {
                        selectedOptions.remove(option)
                    } else {
                        selectedOptions.insert(option)
                    }
                }) {
                    if selectedOptions.contains(option) {
                        // If the option is already selected, display a checkmark
                        Image(systemName: "checkmark")
                    }
                    Text(option) //To displays the text of the option.
                }
            }
        } label: {
            Label("Menu", systemImage: "square.and.pencil")
                .font(.title)
        }
    }
}

Output: