Row selection in a list in SwiftUI

Post Views: 1,118

In this tutorial, we will see how to let users select single and multiple rows in a list in SwiftUI.

SwiftUI provides a simple way to allow users to select one or multiple rows in a list. This can be handy for various app scenarios, like selecting items for further actions.

This article will cover the below topics

Single Row Selection
Multiple Row Selection

Now, we will explore the above-mentioned topics one by one.

Single Row Selection

Here the single row selection means, we can select only one row in a List in SwiftUI. In order to support single row selection follow the steps below.

Define a State Property

We need to create an optional property of the same type as the elements in our list. For example, if our list contains strings, we should create an optional string property.

@State private var selection: String?

In the above code, I have created a variable called selection with a data type of String?, which means it can store a piece of text (String) or be empty (nil). This variable is used to keep track of the selected item in a list within a SwiftUI view.

Create an array of options

Now, I will create an array that will contain some options which the users can select.

let options = ["Item 1", "Item 2", "Item 3"]

In the above program, I have created an array called items that contains three strings (options). These will be the items displayed in the list.

Pass Selection Property

We have to use the selection parameter of the List to pass our selection property. Make sure the list is in editing mode to enable selection.

List(options, id: \.self, selection: $selection) { item in
                Text(item)
            }

In the above code, I have created a List to display a list of items from the options array.

The id parameter is used to automatically identify each item by its own value.

Then, I have used the selection parameter to enable row selection, and the selected item is stored in the selection variable.

Enable Editing Mode

Now, we have to add a button to our view’s toolbar. This is necessary for enabling row selection. We can select the row by clicking this button.

.toolbar {
    EditButton()
    }

The above code will add a button called Edit in the view’s toolbar. When we tap this button we can interact with the rows.

Have a look at the complete code below

import SwiftUI

struct ContentView: View {
    @State private var selection: String?
    
    let options = ["Item 1", "Item 2", "Item 3"]

    var body: some View {
        NavigationStack{
            List(options, id: \.self, selection: $selection) { item in
                Text(item)
            }
            .navigationTitle("Single Selection List")
            .toolbar {
                EditButton()
            }
        }
    }
}

Output:

Multiple Row Selection

We can also select multiple rows at a time in our list if we want. For that, we should change the selection property so that it can store several items.

In this case, we can use the Set property, this is like a container that can hold multiple values of the same type. So, by using Set we can select multiple rows at the same time in our list.

@State private var selection = Set<String>()

In the above code, I have declared a property that is selection using the @State property wrapper, and initialized it with an empty Set of strings (Set<String>()).

The selection property is like a container that can store several chosen items. As we pick items in our list, the items will be stored into this container, so we can keep track of what we have chosen.