How To Make a Custom Picker with Multi-Selection in SwiftUI

How To Make a Custom Picker with Multi-Selection in SwiftUI

I just wanted to start out by saying that this is an abridged version of my original published version from February 23, 2022 that you can find on my website here.

Awhile back I realized I needed a control that would allow a user to select multiple elements at once. Additionally, since I was developing a multiplatform app, I wanted it to look good on both iOS and macOS while also looking good against all the other SwiftUI controls on my forms. In the end I created a simple project, to easily share it with you, using a HStack containing Text controls and a Button that opens the selection view.

Here’s how it looks on both iOS and macOS with nothing selected.

When you’re selecting items a checkmark appears to show the selection was set… or removed.

And once it’s closed again the number is updated so you know how many items are selected without needing to go back in. For this sample project I also listed the selected items below to better show how to see them.

If you’re interested in using this custom control in your code I saved it, in its entirety, to my public SimplyKyraBlog GitHub repository and, if you want a direct link, the file CustomMultiSelectionPicker.swift can be found here. The code is also shared as a Github Gist at the bottom of my post from February 23, 2022 that also includes the backstory of this control, how I developed it, a closeup of both the iOS and macOS versions, and a slight issue I had.

Hope this helps your code and you’re having a great day!

Leave a Reply

Your email address will not be published. Required fields are marked *