How to Use SwiftUI's Form View

Forms are an essential part of many apps or even websites as they provide an easy way for users to enter data and perform actions. In SwiftUI, the Form view makes it simple to create forms with a range of inputs and controls.

Creating a Really Basic Form

To get started with a basic form, simply add a Form view to your view hierarchy:

Copycopy code to clipboard
1struct MyFormView: View {
2    var body: some View {
3        Form {
4            Text("Hey There")
5        }
6    }
7}

This will create a form with a single cell containing the text "Hello, World!". However, forms are typically used for user input, so let's look at some of the different types of inputs we can add.

Adding Inputs/Controls to a Form

The Form view provides a number of built-in input types, including text fields, toggle switches, and pickers. Here is an example of a form with various input types:

Copycopy code to clipboard
1struct MyFormView: View {
2    @State private var name = ""
3    @State private var birthDate = Date()
4    @State private var isSubscribed = false
5    @State private var favoriteColor = "Red"
6    
7    var body: some View {
8        Form {
9            Section(header: Text("Personal Information")) {
10                TextField("Name", text: $name)
11                DatePicker("Birth Date", selection: $birthDate, displayedComponents: .date)
12            }
13            
14            Section(header: Text("Preferences")) {
15                Toggle("Subscribe to Newsletter", isOn: $isSubscribed)
16                Picker("Favorite Color", selection: $favoriteColor) {
17                    Text("Red").tag("Red")
18                    Text("Green").tag("Green")
19                    Text("Blue").tag("Blue")
20                }
21                .pickerStyle(WheelPickerStyle())
22            }
23            
24            Section {
25                Button("Save") {
26                    // Perform save action
27                }
28            }
29        }
30        .navigationTitle("My Form")
31    }
32}

In this example, we have added several sections to the form, each containing different types of inputs. The first section contains a text field and a date picker, while the second section contains a toggle switch and a picker with a wheel style. Finally, the last section contains a button that performs a save action when tapped.

Conclusion

The Form view in SwiftUI provides a powerful and flexible way to create forms with a variety of inputs and controls. I hope this short article has been helpful in showing you how to use the Form view in your own SwiftUI projects!