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.

Practice

1. What is the primary purpose of a TextField in SwiftUI?

easy

A. To display static text that cannot be changed

B. To allow the user to enter and edit text input

C. To create buttons for user interaction

D. To show images in the app interface

Solution

1. Step 1: Understand the role of TextField

   A TextField is a UI element designed for user input, specifically text entry.

2. Step 2: Compare with other UI elements

   Static text is shown by Text or Label, buttons are for taps, images show pictures, so they differ from TextField.

3. Final Answer:

   To allow the user to enter and edit text input -> Option B

4. Quick Check:

   TextField = user text input [OK]

Hint: TextField lets users type text, not just display it [OK]

Common Mistakes:

• Confusing TextField with Text or Label
• Thinking TextField is for buttons or images
• Assuming TextField is read-only

2. Which of the following is the correct syntax to create a basic TextField in SwiftUI bound to a state variable named name?

easy

A. TextField("Enter name", text: $name)

B. TextField(text: name, placeholder: "Enter name")

C. TextField("Enter name", text: name)

D. TextField(text: $name, placeholder: "Enter name")

Solution

1. Step 1: Recall SwiftUI TextField syntax

   The correct syntax uses a placeholder string first, then a binding to a state variable with a $ prefix.

2. Step 2: Check each option

   TextField("Enter name", text: $name) matches the correct syntax: TextField("Enter name", text: $name). Others misuse parameter order or omit $.

3. Final Answer:

   TextField("Enter name", text: $name) -> Option A

4. Quick Check:

   Placeholder first, then binding with $ [OK]

Hint: Use $ before state variable to bind TextField text [OK]

Common Mistakes:

• Omitting $ before the state variable
• Swapping placeholder and text parameters
• Passing text variable without binding

3. What will be displayed on the screen after running this SwiftUI code snippet?

struct ContentView: View {
  @State private var input = ""
  var body: some View {
    VStack {
      TextField("Type here", text: $input)
      Text(input)
    }
  }
}

medium

A. A text field that does not show any placeholder

B. Only a static text 'Type here' displayed

C. A text field with placeholder 'Type here' and below it the text the user types

D. An empty screen with no visible UI

Solution

1. Step 1: Analyze the TextField and Text usage

   The TextField shows placeholder "Type here" and binds to input. The Text below shows the current input value.

2. Step 2: Understand UI behavior

   When user types, input updates and Text shows the typed text live below the field.

3. Final Answer:

   A text field with placeholder 'Type here' and below it the text the user types -> Option C

4. Quick Check:

   TextField placeholder + live text display = A text field with placeholder 'Type here' and below it the text the user types [OK]

Hint: TextField updates bound variable, Text shows it live [OK]

Common Mistakes:

• Thinking placeholder text is static Text
• Assuming TextField does not show placeholder
• Ignoring the live update of Text below

4. Identify the error in this SwiftUI code snippet:

struct ContentView: View {
  @State private var text = ""
  var body: some View {
    TextField("Enter text", text: text)
  }
}

medium

A. TextField cannot be used inside a View

B. TextField requires a placeholder but none is provided

C. State variable should not be private

D. Missing $ before the state variable in TextField binding

Solution

1. Step 1: Check TextField binding syntax

   TextField requires a binding to a state variable, which needs a $ prefix to pass a binding, not the value.

2. Step 2: Identify the error in the code

   The code passes text without $, so it passes a String, not a Binding<String>, causing a compile error.

3. Final Answer:

   Missing $ before the state variable in TextField binding -> Option D

4. Quick Check:

   Use $ to bind state variable in TextField [OK]

Hint: Always prefix @State vars with $ in TextField text binding [OK]

Common Mistakes:

• Forgetting the $ prefix for binding
• Thinking placeholder is optional (it is provided)
• Misunderstanding @State privacy rules

5. You want to create a SwiftUI form where the user enters their email in a TextField. You want to validate the input so that the submit button is only enabled when the email contains an '@' character. Which approach correctly implements this behavior?

hard

A. Use a @State variable for email, bind it to TextField, and disable the button with .disabled(!email.contains("@"))

B. Use a constant String for email and enable the button always

C. Bind TextField to a local variable and enable button only if email length > 0

D. Use @State variable for email but do not bind it to TextField; enable button always

Solution

1. Step 1: Understand state binding and validation

   Binding a @State variable to TextField allows live updates. Validation can check if email contains '@'.

2. Step 2: Control button enabled state

   Using .disabled(!email.contains("@")) disables the button unless email has '@', enforcing validation.

3. Final Answer:

   Use a @State variable for email, bind it to TextField, and disable the button with .disabled(!email.contains("@")) -> Option A

4. Quick Check:

   Bind state, validate with contains('@'), disable button accordingly [OK]

Hint: Bind email state and disable button if '@' missing [OK]

Common Mistakes:

• Not binding TextField to a @State variable
• Using constant or local variables for input
• Enabling button without validation