Forms and User Input

# CHAPTER 15

Forms and User Input #

1. Introduction #

2. Learning Objectives #

• Build native iOS settings/input layouts using the Form container.

• Capture keyboard text input using TextField.

• Mask sensitive passwords using SecureField.

• Capture boolean (on/off) data using Toggle.

• Provide multiple-choice selections using Picker.

• Implement basic front-end validation (disabling buttons if input is bad).

3. The Form Container #

import SwiftUI

struct SettingsView: View {
    var body: some View {
        Form {
            Section(header: Text("Profile")) {
                Text("Update Name")
                Text("Change Profile Picture")
            }
            
            Section(header: Text("Account")) {
                Text("Log Out")
                    .foregroundColor(.red)
            }
        }
    }
}

4. TextField and Two-Way Binding #

struct InputView: View {
    // We MUST have a State to hold the user's typed data!
    @State private var username: String = ""
    
    var body: some View {
        Form {
            // TextField takes a placeholder, and a two-way binding!
            // As the user types, the 'username' variable updates instantly!
            TextField("Enter your username", text: $username)
                .autocapitalization(.none) // Don't capitalize emails/usernames!
            
            // We can prove it's working by showing it below!
            Text("You are typing: \(username)")
        }
    }
}

5. SecureField (Passwords) #

@State private var password = ""

SecureField("Enter your password", text: $password)

6. Toggle (On/Off Switches) #

@State private var receiveEmails = false

Toggle("Subscribe to Newsletter", isOn: $receiveEmails)
    .tint(.green) // Changes the color of the switch when active!

7. Picker (Dropdown Menus) #

@State private var selectedTier = "Free"
let tiers = ["Free", "Pro", "Enterprise"]

Picker("Select Account Tier", selection: $selectedTier) {
    // We loop through the array and create a Text view for each option!
    ForEach(tiers, id: \.self) { tier in
        Text(tier).tag(tier)
    }
}
.pickerStyle(.menu) // Makes it look like a dropdown menu!

8. Mini Project: A Validated Signup Form #

import SwiftUI

struct SignupFormView: View {
    @State private var username = ""
    @State private var password = ""
    @State private var acceptTerms = false
    
    // Computed property for validation!
    var isFormValid: Bool {
        return username.count >= 3 && password.count >= 6 && acceptTerms
    }
    
    var body: some View {
        NavigationStack {
            Form {
                Section(header: Text("Credentials")) {
                    TextField("Username", text: $username)
                    SecureField("Password", text: $password)
                }
                
                Section(header: Text("Legal")) {
                    Toggle("I accept the Terms of Service", isOn: $acceptTerms)
                }
                
                Section {
                    Button("Create Account") {
                        print("Account created for \(username)!")
                    }
                    // This modifier turns the button gray and unclickable if false!
                    .disabled(isFormValid == false) 
                }
            }
            .navigationTitle("Sign Up")
        }
    }
}

9. Common Mistakes #

• Forgetting the $: If you write TextField("Name", text: username), the compiler will fail violently. A TextField requires a live tunnel to push data back into the variable. You MUST provide the Binding prefix: $username.

• Using Forms Everywhere: A Form is heavily styled. It provides a gray background and rounded white rows. If you are trying to build a custom, highly graphical landing page, do NOT use a Form. Use a VStack. Save Forms for data-entry and settings screens.

10. Best Practices #

• Keyboard Types: When asking for an email, explicitly tell the keyboard to show the "@" symbol!

• Auto-Correction: Passwords and Usernames should never be autocorrected.

11. Exercises #

1. 1. Create a Form containing two Section wrappers.

1. 2. Inside the form, create a TextField bound to a @State variable for "City".

12. Coding Challenges #

13. MCQ Quiz with Answers #

14. Interview Questions #

• Q: Explain the necessity of the Two-Way Binding ($) architecture when utilizing a TextField. What mechanically happens between the user's keyboard and the @State variable in memory?

• Q: Contrast the visual and structural architecture of a Form versus a standard VStack. In what specific product design scenarios should a developer choose a Form?

• Q: How do you implement robust, real-time frontend validation on a SwiftUI submit button without manually tracking keystrokes?

15. FAQs #

16. Summary #

17. Next Chapter Recommendation #