Form container in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this SwiftUI form layout?

Consider this SwiftUI code for a form container. What will the user see when this view is rendered?

iOS Swift

import SwiftUI

struct ContentView: View {
  var body: some View {
    Form {
      Section(header: Text("User Info")) {
        TextField("Name", text: .constant("") )
        TextField("Email", text: .constant("") )
      }
      Section(header: Text("Preferences")) {
        Toggle("Subscribe", isOn: .constant(true))
      }
    }
  }
}

A A form with two sections: 'User Info' containing two text fields for Name and Email, and 'Preferences' containing a toggle switch labeled 'Subscribe'.

B A vertical stack with two text fields and a toggle, but no section headers or form styling.

C A list of buttons labeled 'Name', 'Email', and 'Subscribe' without input fields.

D An empty view with no visible UI elements.

💡 Hint

Look at how Form and Section are used to group inputs with headers.

The Form container in SwiftUI groups inputs into sections with headers. TextField and Toggle inside sections create labeled input controls. This code produces a form with two labeled sections and appropriate input controls.

❓ lifecycle

intermediate

When does the SwiftUI Form update its state?

Given a Form with input fields bound to @State variables, when does the form update its UI to reflect changes?

iOS Swift

import SwiftUI

struct SettingsView: View {
  @State private var notificationsEnabled = false

  var body: some View {
    Form {
      Toggle("Enable Notifications", isOn: $notificationsEnabled)
      if notificationsEnabled {
        Text("Notifications are ON")
      } else {
        Text("Notifications are OFF")
      }
    }
  }
}

A The form never updates automatically; state changes are ignored.

B The form updates only when the view appears again after being dismissed.

C The form updates only after a manual refresh triggered by the user.

D The form updates its UI immediately when the toggle is changed by the user.

💡 Hint

Think about how @State works in SwiftUI.

In SwiftUI, @State variables trigger the view to re-render immediately when their values change. The form updates its UI instantly to reflect the new state.

❓ navigation

advanced

What happens when you embed a Form inside a NavigationView?

Consider this SwiftUI code snippet. What is the visible effect of embedding the Form inside a NavigationView with a title?

iOS Swift

import SwiftUI

struct ProfileView: View {
  var body: some View {
    NavigationView {
      Form {
        TextField("Username", text: .constant("") )
        SecureField("Password", text: .constant("") )
      }
      .navigationTitle("Profile")
    }
  }
}

A The form appears without any navigation bar or title.

B The form appears with a navigation bar at the top showing the title 'Profile'.

C The form crashes because Form cannot be inside NavigationView.

D The form appears but the title is shown at the bottom of the screen.

💡 Hint

NavigationView adds a navigation bar with a title.

Embedding a Form inside NavigationView adds a navigation bar at the top. The navigationTitle modifier sets the title text visible in that bar.

📝 Syntax

advanced

What error does this SwiftUI form code produce?

Examine this SwiftUI code snippet. What error will occur when compiling?

iOS Swift

import SwiftUI

struct TestView: View {
  var body: some View {
    Form {
      TextField("Enter", text: .constant("") )
      Section {
        Toggle("Enable", isOn: .constant(true))
      }
      Section(header: Text("Settings")) {
        Text("Extra")
      }
    }
  }
}

A Syntax error: 'Section' missing braces around its content.

B Runtime error: Toggle cannot be inside a Section.

C No error; code compiles and runs fine.

D Type error: TextField requires a binding to a @State variable, not a constant.

💡 Hint

Check the Section declaration syntax carefully.

The Section with header 'Settings' lacks braces {} around its content. This causes a syntax error because Section expects a closure for its content.

🔧 Debug

expert

Why does this form not update the toggle state?

This SwiftUI form has a toggle bound to a variable. Why does toggling it not change the UI?

iOS Swift

import SwiftUI

struct DebugView: View {
  var isOn = false

  var body: some View {
    Form {
      Toggle("Switch", isOn: $isOn)
    }
  }
}

A Because the Form container disables toggles by default.

B Because the Toggle label must be a Text view, not a string.

C Because 'isOn' is a regular variable, not a @State property, so changes don't trigger UI updates.

D Because the Toggle requires a Binding to an @ObservedObject, not a variable.

💡 Hint

Think about how SwiftUI tracks state changes.

In SwiftUI, only @State properties trigger UI updates when changed. A plain variable does not provide a binding that updates the view.

Practice

1. What is the main purpose of using a Form container in SwiftUI?

easy

A. To handle network requests

B. To create animations for buttons

C. To display images in a grid

D. To group input fields vertically for easy data entry

Solution

1. Step 1: Understand the role of Form in SwiftUI

   The Form container is designed to group input fields vertically, making data entry easier and more organized.

2. Step 2: Compare with other options

   Options B, C, and D describe unrelated functionalities like animations, image grids, and networking, which are not the purpose of Form.

3. Final Answer:

   To group input fields vertically for easy data entry -> Option D

4. Quick Check:

   Form groups inputs vertically = A [OK]

Hint: Form groups inputs vertically for easy data entry [OK]

Common Mistakes:

• Confusing Form with layout containers like VStack
• Thinking Form handles animations or images
• Assuming Form manages network tasks

2. Which of the following is the correct syntax to create a simple form with a text field in SwiftUI?

easy

A. Form { TextField("Name", text: $name) }

B. Form() -> TextField("Name", text: $name)

C. Form: TextField("Name", text: $name)

D. Form(TextField("Name", text: $name))

Solution

1. Step 1: Recall SwiftUI Form syntax

   The correct way to declare a form with a text field is using a closure: Form { ... } with the input inside the braces.

2. Step 2: Analyze each option

   Form { TextField("Name", text: $name) } uses the correct closure syntax. Options A, B, and C use invalid syntax or incorrect punctuation.

3. Final Answer:

   Form { TextField("Name", text: $name) } -> Option A

4. Quick Check:

   Form uses braces for content = D [OK]

Hint: Use braces { } to wrap form content in SwiftUI [OK]

Common Mistakes:

• Using parentheses instead of braces for Form content
• Trying to call Form like a function with arrow syntax
• Misplacing colons or parentheses

3. What will be the visible result of this SwiftUI code?

Form {
  Section(header: Text("User Info")) {
    TextField("Username", text: $username)
    Toggle("Enable Notifications", isOn: $notifications)
  }
}

medium

A. A form with no visible header and only a text field

B. A form with a section titled 'User Info' containing a text field and a toggle switch

C. A form with two separate sections, one for text field and one for toggle

D. A form that crashes due to missing bindings

Solution

1. Step 1: Understand Section usage inside Form

   The Section groups the text field and toggle under the header "User Info" inside the form.

2. Step 2: Visualize the UI output

   The form will show a titled section with the header text, containing the two input controls vertically stacked.

3. Final Answer:

   A form with a section titled 'User Info' containing a text field and a toggle switch -> Option B

4. Quick Check:

   Section header groups inputs = C [OK]

Hint: Section header groups inputs visually inside Form [OK]

Common Mistakes:

• Thinking each input creates a separate section
• Expecting no header to appear
• Assuming code crashes without seeing binding declarations

4. Identify the error in this SwiftUI form code snippet:

Form {
  TextField("Email", text: email)
  Toggle("Subscribe", isOn: $subscribe)
}

medium

A. Form cannot contain both TextField and Toggle

B. Toggle label should be a Text view

C. Missing $ before email binding in TextField

D. TextField requires a placeholder parameter

Solution

1. Step 1: Check binding usage in TextField

   The TextField requires a binding to a state variable, which must be prefixed with $. Here, email lacks the $.

2. Step 2: Verify other parts

   The Toggle uses $subscribe correctly. The label can be a string. Form can contain both controls. Placeholder is the first parameter.

3. Final Answer:

   Missing $ before email binding in TextField -> Option C

4. Quick Check:

   Bindings need $ prefix = A [OK]

Hint: Always prefix state bindings with $ in input controls [OK]

Common Mistakes:

• Forgetting $ before state variables in bindings
• Thinking Toggle label must be Text view
• Assuming Form restricts input types

5. You want to create a form with two sections: one for personal info with a text field for name, and one for settings with a toggle for dark mode. Which code snippet correctly implements this?

hard

A. Form {
Section(header: Text("Personal Info")) {
TextField("Name", text: $name)
}
Section(header: Text("Settings")) {
Toggle("Dark Mode", isOn: $darkMode)
}
}

B. Form {
TextField("Name", text: $name)
Toggle("Dark Mode", isOn: $darkMode)
Section(header: Text("Personal Info")) {}
Section(header: Text("Settings")) {}
}

C. Form {
Section {
TextField("Name", text: $name)
Toggle("Dark Mode", isOn: $darkMode)
}
}

D. Form {
Section(header: Text("Personal Info")) {
Toggle("Dark Mode", isOn: $darkMode)
}
Section(header: Text("Settings")) {
TextField("Name", text: $name)
}
}

Solution

1. Step 1: Understand section grouping requirements

   Each section should group related inputs with the correct header. Personal info section must contain the name text field, settings section the dark mode toggle.

2. Step 2: Analyze each option's structure

   Form { Section(header: Text("Personal Info")) { TextField("Name", text: $name) } Section(header: Text("Settings")) { Toggle("Dark Mode", isOn: $darkMode) } } correctly places inputs inside their respective sections with headers. Form { TextField("Name", text: $name) Toggle("Dark Mode", isOn: $darkMode) Section(header: Text("Personal Info")) {} Section(header: Text("Settings")) {} } places inputs outside sections and empty sections after. Form { Section { TextField("Name", text: $name) Toggle("Dark Mode", isOn: $darkMode) } } puts both inputs in one section without headers. Form { Section(header: Text("Personal Info")) { Toggle("Dark Mode", isOn: $darkMode) } Section(header: Text("Settings")) { TextField("Name", text: $name) } } swaps inputs between sections incorrectly.

3. Final Answer:

   Form with two sections correctly grouping inputs by header -> Option A

4. Quick Check:

   Inputs grouped by section headers = B [OK]

Hint: Group related inputs inside Section with header inside Form [OK]

Common Mistakes:

• Placing inputs outside sections
• Mixing inputs between wrong sections
• Leaving sections empty or without headers