Form in SwiftUI


In this tutorial, you will learn about the SwiftUI Form and how to use it to create forms.

In SwiftUI, Form is a container to group controls used for data entry such as text fields, sliders, toggles buttons, steppers, pickers etc.

Below is the given syntax for a Form in Swift:

    Form {
        // Form entries
    }

Inside the form container, we can add all our form entries, for example, text fields, toggle switches, selectors etc.

Now let’s see some examples of creating a form using the Form container:

Basic form examples with Text items

Below is given a code to create a basic form and a text view inside it:


    var body: some View {

        Form {
            Text("I am here")
        }
        
    }
    

The above code will look like you can see in the image below when we run it on our device:

SwiftUI form with Text View

As you can see, putting the Text view inside the Form changes it quite dramatically. It automatically makes the background gray and the text “I am here” is on the top-left instead of the center.

Now let’s add some more text items:


        Form {
            Text("I am here")
            Text("I am here")
            Text("I am here")
            Text("I am here")
        }

It will looks like:

SwiftUI form with Text Items

It is now adding the text items like a list. From the above screenshot, you can see it is like a list. In this example, we have added 4 items. But if you try adding more than 10 items, you can’t do it.

In SwiftUI, there is a limitation that doesn’t allow you to add more than 10 items in a form. But there is a solution to this proble. You can use group and put items in group.

Adding Form items to group

As I have mentioned above, SwiftUI doesn’t allow adding more than 10 items. So we have Group to overcome this problem.

Below is how we can use group:


        Form {
            
            Group {
                Text("Hello World")
                Text("Hello World")
                Text("Hello World")
                Text("Hello World")
            }
            
            Group {
                Text("Hello World")
                Text("Hello World")
                Text("Hello World")
                Text("Hello World")
                Text("I am here")
            }
            
            Group {
                Text("I am here")
                Text("I am here")
                Text("I am here")
                Text("I am here")
                Text("I am here")
                Text("I am here")
            }
            

        }

This time, you can see that we have successfully added more than 10 items by using the Group.

Group also has its limitations. Each group can have the maximum of 10 items. SwiftUI allows having 10 childview inside a parent.

Another thing you can see in the user interface doesn’t look different. It is all the same. There is no something like separator between the two groups. If you want to separate visually to the interfaces, then you can use the Section container in the Form instead of using Group.

Using Section in the SwiftUI Form

With the use of Section view, you can actually differentiate in the user interface between Sections which was not possible in the case of using Group. Below is how we can do it:

        Form {
            
            Section {
                Text("Hello World")
                Text("Hello World")
            }
            
            Section {
                Text("Hello World")
                Text("Hello World")
            }
            
            Section {
                Text("I am here")
                Text("I am here")
            }
            

        }

The user interface will look like this you can see below:

SwiftUI form with Section

As you can see, each section is split with some kind of separator and it is clearly visible in the user interface.