Add a TextField to Alert in SwiftUI

In this tutorial, we will see how to add a TextField to an Alert in SwiftUI.

In iOS 16 and above versions, we can now add one or more TextField or SecureField components within an alert. This allows us to take input from users directly within the alert view.

We can include a text field in an alert by using TextField or SecureField components as the action content of the alert.

Now, have a look at the examples below to include a single or multiple TextField or SecureField to an Alert.

Single TextField in Alert

First of all, I will create an alert with a single TextField. It will include a button that will trigger the presentation of the alert. The alert will pop up with a TextField, where we can enter whatever we want as input.

Example

import SwiftUI

struct ContentView: View {
    @State private var presentAlert = false
    @State private var inputText = ""

    var body: some View {
        VStack {
            Button("Show Alert") {
                presentAlert = true
            }
            .alert("Enter Text", isPresented: $presentAlert) {
                TextField("Type something", text: $inputText)
                Button("OK", action: {
                    // Handle the inputText as needed
                    print("You entered: \(inputText)")
                    presentAlert.toggle()
                })
            } message: {
                Text("Please enter some text:")
            }
        }
    }
}

In the above code, I have used the @State variables to manage the state of the alert and the input text.

Inside the Alert, I have created a single TextField with a placeholder “Type Something”. Then, I have bound the TextField to the state property inputText using the $ prefix, which is a two-way binding.

Then, the “OK” button that is included in the alert will print the entered text to the console and dismiss the alert.

Output:

Multiple TextField in Alert

We can also add multiple TextField in an Alert similar to the above in SwiftUI. We can add both TextField and SecureField based on our requirements.

Have a look at the example below to achieve this task.

Example

import SwiftUI

struct ContentView: View {
    //State variables to track the presentation of the alert and user input
    @State private var presentAlert = false
    @State private var username = ""
    @State private var password = ""

    var body: some View {
        // Button triggering the alert presentation
        Button("Show Alert") {
            presentAlert.toggle()
        }
        // Alert modifier with title, content, and message
        .alert("Log in", isPresented: $presentAlert) {
            TextField("Username", text: $username)
            
            SecureField("Password", text: $password)
            
            // OK button triggering the authentication function
            Button("OK", action: authenticate)
            
            // Cancel button to dismiss the alert
            Button("Cancel", role: .cancel) { }
        } message: {
            // Message displayed above the text fields
            Text("Please enter your username and password.")
        }
    }

    // Function to authenticate the user based on entered credentials
    func authenticate() {
        if username == "Sam" && password == "Sam123" {
            print("Welcome to codeSpeedy")
        } else {
            print("Invalid login credentials")
        }
    }
}

In the above program, I have used TextField and the SourceField within the alert for the username and password input.

Then, I have created a button “OK” inside the alert that will trigger the authentication function (authenticate) and dismiss the alert.

The authenticate function will check the entered credentials and print a corresponding message.

Output:

Compatibility with iOS 15 and Prior

In iOS 15 and earlier, We can’t add a TextField to an alert directly. The iOS 15 and previous versions don’t support adding TextField to an alert.  Here the alert modifier only accepts Text for the message and Button for actions. It ignores any other type of views.

Now, I will show you an attempt to include TextField in an alert, which is ignored in those versions.

Example

import SwiftUI

struct ContentView: View {
    @State private var presentAlert = false
    @State private var inputText = ""

    var body: some View {
        VStack {
            Button("Show Alert") {
                presentAlert = true
            }
            .alert("Enter Text", isPresented: $presentAlert) {
                
                // Any view other than Button would be ignored
                TextField("Type something", text: $inputText)
                
            } message: {
                Text("Please enter some text:")
            }
        }
    }
}

Output:

As you can see, the TextField I have created within the alert has been ignored here.