SwiftUI - Forms

SwiftUI provides good support to forms. Forms are the containers that are used to store user input in a structured interface. They are commonly used where the input or data is being modified, such as contact list, settings, etc. Just like a list it also displays data in vertical scrollable columns. So in this chapter, we are going to learn how to create forms, customize forms and much more about forms.

Creating Form in SwiftUI

In SwiftUI, we can create a form with the help of the From component. This component wraps all the controls used for data entry such as text-fields, toggle, picker, etc. Through these controls, we can add data in the form. It displays data in a vertical scrolling list.

Syntax

Following is the syntax −

Form{
   // Form Content
}

Example

The following SwiftUI program creates a simple form.

import SwiftUI
struct ContentView: View {
   var body: some View {
     Form{
       Text("Name")
       Text("Email")
       Text("Date")
     }
   }
}   
#Preview {
   ContentView()
}

Output

Adding Controls in the Form in SwiftUI

To make forms more attractive and user friendly we can add multiple pre-defined controls in it. They enhance the appearance of the form and also allow users to enter data according to their requirements. In the form, you can use the following controls to enter data−

Example

The following SwiftUI program is used to add controls in the form −

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 {
     Form{
       TextField("Enter Name", text: $name)
       TextField("Enter Email", text: $email)
       TextEditor(text: $about)
       Toggle("Notification", isOn: $notification)
       Picker("City", selection:$city){
         ForEach(["Delhi", "Mumbai", "Pune", "Kolkata"], id: \.self){
            s in Text(s)
         }
       }
       Button("Submit", action:{
         print("Submitted")
       })       
     }
   }
}   
#Preview {
   ContentView()
}

Output

Adding Navigation Title in the Form in SwiftUI

Every Form, List or Table needs a suitable title through which they identify. So in forms, we can set the title with the help of NavigationStack. NavigationStack structure wraps around the Form component and provides the navigationTitle() modifier which allows us to set the title of the form. Although we can also set the title of a form using VStack and Text, still NavigationStack is the most effective and direct way to create a title and also provide additional functionalities to the form.

Syntax

Following is the syntax −

NavigationStack{
   Form{
   // Form Content
   }
}.navigationTitle("Form Title")

Example

The following SwiftUI program is used to insert form title using NaivationStack.

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{
         TextField("Enter Name", text: $name)
         TextField("Enter Email", text: $email)
         TextEditor(text: $about)
         Toggle("Notification", isOn: $notification)
         Picker("City", selection:$city){
            ForEach(["Delhi", "Mumbai", "Pune", "Kolkata"], id: \.self){
              s in Text(s)
            }
         }
         Button("Submit", action:{
            print("Submitted")
         })
       }.navigationTitle("Employee Data")
     }
   }
}   
#Preview {
   ContentView()
}

Output

Styling Form in SwiftUI

SwiftUI allows us to style the form with the help of the formStyle() modifier. This modifier changes the appearance and behavior of the form in three different modes: automatic, grouped and columns. We can select any of the modes according to our requirements.

Syntax

Following is the syntax −

func formStyle(_ style: S) -> some View where S : FormStyle

It takes only one parameter which is the style which we want to apply and the pre-defined styles are as follows −

• automatic: It applies the default system form style.

• columns: It creates a non-scrolling form with a trailing aligned column of labels next to leading aligned columns of their values.

• grouped: It creates groups of the rows of the form.

Example

The following SwiftUI program is used to style the form using the formStyle() modifier.

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{
         TextField("Enter Name", text: $name)
         TextField("Enter Email", text: $email)
         TextEditor(text: $about)
         Toggle("Notification", isOn: $notification)
         Picker("City", selection:$city){
            ForEach(["Delhi", "Mumbai", "Pune", "Kolkata"], id: \.self){
              s in Text(s)
            }
         }
         Button("Submit", action:{
            print("Submitted")
         })
       }.navigationTitle("Employee Data").formStyle(.automatic)
     }
   }
}   
#Preview {
   ContentView()
}

Output

Print Page

Previous

Next

Advertisements