There are times when you want to show a selection of options to the user, one way to do this is by using an action sheet. In SwiftUI, you can do this using &#96;confirmationDialog()&#96; modifier. It&#x27;s worth noting that this modifier only works for iOS 15 and above. If you are targeting iOS 13&#x2F;14 then you need to use &#96;ActionSheet&#96; instead.

&#x5C;
In this tutorial, we will go through both these methods. Let&#x27;s start with &#96;confirmationDialog()&#96; modifier first.

## iOS 15+ ConfirmationDialog Modifier in SwiftUI

&#x5C;
Here is the code for this first method. Here you can see we have a state property called &#96;showOptions&#96;. When we tap the “Show Action Sheet button”, we will make its value true.

&#96;&#96;&#96;javascript
struct ContentView: View {
    @State var showOptions: Bool = false
    @State var selection: String = &quot;&quot;
    var body: some View {
        Text(&quot;Select your Country: &#x5C;(selection)&quot;)
        Button {
            showOptions = true
        } label: {
            Text(&quot;Show Action Sheet&quot;)
        }.confirmationDialog(&quot;Select Countries&quot;, isPresented: $showOptions) {
            Button(&quot;🇺🇸 USA&quot;) {
                selection = &quot;USA&quot;
            }
            Button(&quot;🇫🇷 France&quot;) {
                selection = &quot;France&quot;
            }
            Button(&quot;🇨🇦 Canada&quot;) {
                selection = &quot;Canada&quot;
            }
        } message: {
            Text(&quot;Select a country&quot;)
        }

    }
}
&#96;&#96;&#96;

Then we are simply using &#96;confirmationDialog&#96; modifier, the modifier takes in the title, and a boolean binding. We will pass the &#96;showOptions&#96; boolean. Note the &#96;$&#96; symbol in front of &#96;showOptions&#96;. This is a way to do two way binding in SwiftUI. So when the &#96;showOptions&#96; becomes true when we tap the button, the action sheet shows up. When we dismiss the action sheet, the value of &#96;howOptions&#96; goes back to false. It’s a way to track if the action sheet is being presented or not.

&#x5C;
Please also note that &#96;confirmationDialog&#96; is supported by multiple platforms, and the string passed to &#96;title&#96; argument isn&#x27;t shown on iOS. In order to give your action sheet a title, you need to provide a message closure as shown above.

&#x5C;
Next, the &#96;.confirmationDialog&#96; takes in a closure which contains all the action &#96;Buttons()&#96;. So here we have created three buttons, and the action closure of each button changes the selection property. We are also showing the selection property in a &#96;Text&#96; view right above the “Show Action Sheet” button. So, when any of the action buttons is tapped, the text is updated.

&#x5C;
We can even add &#96;.destructive&#96; style to the Button so that SwiftUI colors the button text appropriately.

&#x5C;
 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;confirmationDialogueiOS15.gif?alt=media&amp;token=3a8167e5-3ff8-4093-9180-f66a88a8ce31)

We can see that there is repetition in the &#96;confirmationDialog&#96; closure. We are creating Buttons and the code is pretty much similar for all of them. We can do better here by adding a &#96;ForEach&#96; loop within the closure like so:

&#96;&#96;&#96;javascript
struct ContentView: View {
    @State var showOptions: Bool = false
    @State var selection: String = &quot;&quot;
    var body: some View {
        Text(&quot;Select your Country: &#x5C;(selection)&quot;)
        Button {
            showOptions = true
        } label: {
            Text(&quot;Show Action Sheet&quot;)
        }.confirmationDialog(&quot;Select Countries&quot;, isPresented: $showOptions) {
            ForEach([&quot;🇺🇸 USA&quot;, &quot;🇫🇷 France&quot;, &quot;🇨🇦 Canada&quot;], id: &#x5C;.self) { item in
                Button(item) {
                    selection = item
                }
            }
        } message: {
            Text(&quot;Select a country&quot;)
        }
    }
}
&#96;&#96;&#96;

So we are iterating over the array using &#96;ForEach&#96; loop, and within the body of the loop, creating a Button and providing action to it.

&#x5C;
Now let us discuss how to achieve the same for iOS 14 and below.

## Action Sheet modifier for iOS in SwiftUI

Let&#x27;s use &#96;actionSheet&#96; approach now. Here you also need to pass a boolean to track the presentation state of the action sheet.

&#96;&#96;&#96;javascript
struct ContentView: View {
    @State var showOptions: Bool = false
    @State var selection: String = &quot;&quot;
    var body: some View {
        Text(&quot;Select your Country: &#x5C;(selection)&quot;)
        Button {
            showOptions = true
        } label: {
            Text(&quot;Show Action Sheet&quot;)
        }.actionSheet(isPresented: $showOptions) {
            ActionSheet(title: Text(&quot;Select Country&quot;),
                        buttons: [
                            .default(Text(&quot;🇺🇸 USA&quot;)) {
                                selection = &quot;🇺🇸 USA&quot;
                            },
                            .default(Text(&quot;🇫🇷 France&quot;)) {
                                selection = &quot;🇫🇷 France&quot;
                            },
                            .default(Text(&quot;🇨🇦 Canada&quot;)) {
                                selection = &quot;🇨🇦 Canada&quot;
                            },
                            .destructive(Text(&quot;Cancel&quot;))
                        ])
        }

    }
}
&#96;&#96;&#96;

The API isn&#x27;t as straightforward as the &#96;.confirmationDialog&#96;. Here you need to use &#96;ActionSheet&#96; struct, pass in the title and an array of type &#96;Alert.Button&#96;. The &#96;.default&#96; button just provides simple styling option. However, with this approach you don&#x27;t get the &#96;Cancel&#96; button for free and therefore you need to add .&#96;destructive&#96; to get the cancel button.

&#x5C;
The end result is same for both, you get an action sheet and tapping on any action updates the text view with the selection.

The code for this project is available on [GitHub](https:&#x2F;&#x2F;github.com&#x2F;devbriteio&#x2F;ios&#x2F;tree&#x2F;main&#x2F;how-to-implement-action-sheet-in-swiftui).

How to Implement an Action Sheet in SwiftUI

About

Legal

Products

Resources

Category: