How to add a TextField to Alert in SwiftUI

In iOS 15 and prior, having TextField in an alert isn't supported with an alert modifier. In iOS 16, we can do this by just adding a TextField as an alert action.

Alert in iOS 15

alert modifier in SwiftUI accept a ViewBuilder for both message and its actions.

But if you try to use anything other than Text for the message and Button for the actions, SwiftUI will simply ignore that views.

struct ContentView: View {
    @State private var presentAlert = false
    var body: some View {
        Button("Show Alert") {
            presentAlert = true
        }
        .alert("Title", isPresented: $presentAlert, actions: {
            // Any view other than Button would be ignored
            TextField("TextField", text: .constant("Value"))
        }, message: {
            // Any view other than Text would be ignored
            TextField("TextField", text: .constant("Value"))
        })
    }
}

TextField gets ignored when used as action and message content in iOS 15.

You can easily support sarunw.com by checking out this sponsor.

AI Grammar: Correct grammar, spell check, check punctuation, and parphrase.

Try it for Free

How to add a TextField to Alert in SwiftUI

In iOS 16, actions view builder allow two new view, TextField and SecureField.

We can have a text field in an alert by using TextField or SecureField as action content.

struct ContentView: View {
    @State private var presentAlert = false
    @State private var username: String = ""
    @State private var password: String = ""
    
    var body: some View {
        Button("Show Alert") {
            presentAlert = true            
        }
        .alert("Login", isPresented: $presentAlert, actions: {
            TextField("Username", text: $username)
            SecureField("Password", text: $password)
            
            Button("Login", action: {})
            Button("Cancel", role: .cancel, action: {})
        }, message: {
            Text("Please enter your username and password.")
        })
    }
}