TextField in iOS Swift - Mini App: Build & Ship

Build: Simple Text Input

A screen with a text field where the user can type their name and see it displayed below.

Target UI

-----------------------
| Simple Text Input    |
|---------------------|
| Enter your name:     |
| [               ]   |
|                     |
| Your name is:       |
|                     |
-----------------------

Add a UITextField for user input with placeholder 'Enter your name'

Add a UILabel below the text field that updates in real-time as the user types

Use proper layout so the UI looks neat on all iPhone screen sizes

Dismiss keyboard when user taps return key

Starter Code

iOS Swift

import UIKit

class ViewController: UIViewController {

    // TODO: Add UITextField and UILabel properties here

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        // TODO: Initialize and add UITextField and UILabel to the view
        // TODO: Set constraints for layout
        // TODO: Set UITextField delegate
    }

    // TODO: Implement UITextFieldDelegate method to update label and dismiss keyboard
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

iOS Swift

import UIKit

class ViewController: UIViewController, UITextFieldDelegate {

    let nameTextField = UITextField()
    let nameLabel = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        nameTextField.placeholder = "Enter your name"
        nameTextField.borderStyle = .roundedRect
        nameTextField.translatesAutoresizingMaskIntoConstraints = false
        nameTextField.delegate = self
        view.addSubview(nameTextField)

        nameLabel.text = "Your name is:"
        nameLabel.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(nameLabel)

        NSLayoutConstraint.activate([
            nameTextField.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 40),
            nameTextField.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            nameTextField.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),

            nameLabel.topAnchor.constraint(equalTo: nameTextField.bottomAnchor, constant: 20),
            nameLabel.leadingAnchor.constraint(equalTo: nameTextField.leadingAnchor),
            nameLabel.trailingAnchor.constraint(equalTo: nameTextField.trailingAnchor)
        ])
    }

    func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        if let currentText = textField.text as NSString? {
            let updatedText = currentText.replacingCharacters(in: range, with: string)
            nameLabel.text = "Your name is: " + updatedText
        }
        return true
    }

    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        textField.resignFirstResponder()
        return true
    }
}

We create a UITextField with a placeholder and a rounded border. We add a UILabel below it to show the typed name. Both views use Auto Layout constraints for proper positioning and responsiveness. The ViewController conforms to UITextFieldDelegate to update the label text as the user types and to dismiss the keyboard when the return key is pressed.

Final Result

Completed Screen

-----------------------
| Simple Text Input    |
|---------------------|
| Enter your name:     |
| [John Doe       ]   |
|                     |
| Your name is: John Doe |
-----------------------

User taps the text field and keyboard appears

User types their name, label updates in real-time below

User taps return key, keyboard dismisses

Stretch Goal

Add a clear button inside the text field to erase the current input quickly.

💡 Hint

Set the UITextField's clearButtonMode property to .whileEditing to show a clear button automatically.