SwiftUI - Breaking Forms in Sections

SwiftUI allows us to divide the rows of the form into sections. Sections are used to organize form content into meaningful groups. Every section has an optional header and footer which allows us to provide labels to different groups of a form. In SwiftUI, we can achieve a section with the help of Section View. It is commonly used for organizing data in a structure which improves user experiences.

Creating forms in Section in SwiftUI

We can create sections in forms with the help of Section view. It creates groups of related content which makes the form easier to navigate. It provides a header and footer to the grouped content so that a user can know more about the grouped content. A single form can have multiple sections.

Syntax

Following is the syntax −

Form{
   Section(){
      content
   }header:{
      //content
   }
   Section{

   }footer:{

   }
}

Example 1

The following SwiftUI program creates a simple form with a section.

import SwiftUI

struct ContentView: View {
   @State private var name: String = ""
   @State private var email: String = ""
   @State private var about: String = "Write about yourself..."
   @State private var notification = false
   @State private var city: String = "Delhi"

   var body: some View {
      NavigationStack{
         Form{
            Section{
               TextField("Enter Name", text: $name)
               TextField("Enter Email", text: $email)
               TextEditor(text: $about)
               Picker("City", selection:$city){
                  ForEach(["Delhi", "Mumbai", "Pune", "Kolkata"], id: \.self){
                     s in Text(s)
                  }
               }
            }
            Section{
               Toggle("Notification", isOn: $notification)
            }
         }.navigationTitle("Employee Data")
      }
   }
}   
#Preview {
   ContentView()
}

Output

Example 2

The following SwiftUI program creats a simple form with a header and footer.

import SwiftUI
struct ContentView: View {
   @State private var name: String = ""
   @State private var email: String = ""
   @State private var about: String = "Write about yourself..."
   @State private var notification = false
   @State private var city: String = "Delhi"

   var body: some View {
      NavigationStack{
         Form{
            Section{
               TextField("Enter Name", text: $name)
               TextField("Enter Email", text: $email)
               TextEditor(text: $about)
               Picker("City", selection:$city){
                  ForEach(["Delhi", "Mumbai", "Pune", "Kolkata"], id: \.self){
                     s in Text(s)
                  }
               }
            }header: {
               Text("Employee's details")
            }footer: {
               Text("Provide personal data")
            }
            Section{
               Toggle("Notification", isOn: $notification)
            }header: {
               Text("Setting Notification")
            }
         }.navigationTitle("Employee Data")
      }
   }
}   
#Preview {
   ContentView()
}

Output