Form container in iOS Swift - Mini App: Build & Ship

Build: User Info Form

A simple form screen where users can enter their name and email, then submit the form.

Target UI

-------------------------
| User Info Form        |
|-----------------------|
| Name: [___________]   |
| Email: [___________]  |
|                       |
|       [Submit]        |
-------------------------

Add two text fields: one for Name and one for Email.

Add a Submit button below the text fields.

When Submit is tapped, print the entered Name and Email to the console.

Use a vertical stack to arrange the fields and button with spacing.

Add padding around the form content.

Starter Code

iOS Swift

import SwiftUI

struct UserInfoForm: View {
    // TODO: Add @State properties for name and email

    var body: some View {
        VStack {
            // TODO: Add TextFields for name and email

            // TODO: Add Submit button
        }
        .padding()
    }
}

struct UserInfoForm_Previews: PreviewProvider {
    static var previews: some View {
        UserInfoForm()
    }
}

Task 1

Task 2

Task 3

Task 4

Solution

iOS Swift

import SwiftUI

struct UserInfoForm: View {
    @State private var name: String = ""
    @State private var email: String = ""

    var body: some View {
        VStack(spacing: 20) {
            TextField("Name", text: $name)
                .textFieldStyle(RoundedBorderTextFieldStyle())

            TextField("Email", text: $email)
                .keyboardType(.emailAddress)
                .textFieldStyle(RoundedBorderTextFieldStyle())

            Button("Submit") {
                print("Name: \(name), Email: \(email)")
            }
            .buttonStyle(.borderedProminent)
        }
        .padding()
    }
}

struct UserInfoForm_Previews: PreviewProvider {
    static var previews: some View {
        UserInfoForm()
    }
}

We use @State properties to store the user's input for name and email. The VStack arranges the two TextField views and the Button vertically with spacing. Each TextField uses a rounded border style for clarity. The email field uses the email keyboard type for better user experience. The Submit button prints the current values to the console when tapped. Padding around the stack keeps the form content away from screen edges.

Final Result

Completed Screen

-------------------------
| User Info Form        |
|-----------------------|
| Name: [John Doe    ]  |
| Email: [john@example] |
|                       |
|       [Submit]        |
-------------------------

User taps the Name field and types their name.

User taps the Email field and types their email address.

User taps the Submit button, and the app prints the entered name and email to the console.

Stretch Goal

Add validation to disable the Submit button unless both fields are not empty and the email contains '@'.

💡 Hint

Use a computed property to check if name and email are valid, then bind the button's disabled state to it.