Editable Text Field inside Alert Controller iOS Tutorial

Using the UIAlertController class it is not only possible to show alerts, but also get text input using Text Fields. In this tutorial a username and password is obtained from the user and displayed in the console. This tutorial is made with Xcode 10 and built for iOS 12.

Open Xcode and create a new Single View App.

For product name, use IOSTextFieldAlertControllerTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

Go to the Storyboard. Drag a Button from the Object Library to the top of the main View. Double-click the Button and set the title to "Log in". Ctrl + Drag to the top of the main view and select the "Vertical Spacing to Top Layout Guide" and "Center Horizontally in Container". options.

The Storyboard should look like this.

Select the Assistant Editor and make sure the ViewController.swift is visible. Ctrl and drag from the Button and create the following Action.

Inside the ViewController class, implement the showAlertController action method.

@IBAction func showAlertController(_ sender: Any) {
    // 1.
    var usernameTextField: UITextField?
    var passwordTextField: UITextField?

    // 2.
    let alertController = UIAlertController(
        title: "Log in",
        message: "Please enter your credentials",
        preferredStyle: .alert)

    // 3.
    let loginAction = UIAlertAction(
    title: "Log in", style: .default) {
        (action) -> Void in

        if let username = usernameTextField?.text {
            print(" Username = \(username)")
        } else {
            print("No Username entered")

        if let password = passwordTextField?.text {
            print("Password = \(password)")
        } else {
            print("No password entered")

    // 4.
    alertController.addTextField {
        (txtUsername) -> Void in
        usernameTextField = txtUsername
        usernameTextField!.placeholder = "<Your username here>"

    alertController.addTextField {
        (txtPassword) -> Void in
        passwordTextField = txtPassword
        passwordTextField?.isSecureTextEntry = true
        passwordTextField?.placeholder = "<Your password here>"

    // 5.
    present(alertController, animated: true, completion: nil)

  1. Two optional variables are declared to represent the two textfields inside the Alert

  2. An Alert Controller with the Alert style is created

  3. An Alert Action is created, inside the closure the entered text in the Text Fields will be printed to the console.

  4. The addTextField method adds the text input fields, taking the Text Field as a parameter inside the closure.

  5. The login action is added to the Alert Controller and the controller is displayed.

Build and Run the project. Select the login button and fill in the username/password field inside the Alert Controller. The entered text will be displayed in the console.

You can download the source code of the IOSTextFieldAlertControllerTutorial at the ioscreator repository on Github.