Simple Swift Guide

In this tutorial we’re going to learn how to create and use forms in SwiftUI by building a simple settings form UI. Form in SwiftUI is a container which allows you to group data entry controls such as text fields, toggles, steppers, pickers and others. We’re going to explore and add each kind of data entry control to a form in this tutorial.

Form with TextField

In order to create a basic form with text field, wrap your content view in NavigationView and then embed a Form within it:

struct ContentView: View {
    @State var username: String = ""
    
    var body: some View {
        NavigationView {
            Form {
                TextField("Username", text: $username)
            }
            .navigationBarTitle("Settings")
        }
    }
}

Note that we also added a State variable called username to hold the value of text input.

The result should look like this:

Add Section and Toggle to the Form

Let’s update our form by adding a toggle with an option to keep our account private and creating a section called “Profile” containing both the TextField and a Toggle:

@State var username: String = ""
@State var isPrivate: Bool = true

var body: some View {
    NavigationView {
        Form {
            Section(header: Text("PROFILE")) {
                TextField("Username", text: $username)
                Toggle(isOn: $isPrivate) {
                    Text("Private Account")
                }
            }
        }
        .navigationBarTitle("Settings")
    }
}

The result should look like this:

Add Picker to the Form

Create a new section called Notifications. The section will contain a Toggle to turn the notifications on and off and a picker to select notifications preview options. Create three new variables to keep track of the toggle selection, selected index of the picker and a list of picker options:

@State var notificationsEnabled: Bool = false
@State private var previewIndex = 0
var previewOptions = ["Always", "When Unlocked", "Never"]

Section(header: Text("NOTIFICATIONS")) {
    Toggle(isOn: $notificationsEnabled) {
        Text("Enabled")
    }
    Picker(selection: $previewIndex, label: Text("Show Previews")) {
        ForEach(0 ..< previewOptions.count) {
            Text(self.previewOptions[$0])
        }
    }
}

The result should look like this:

Add Section with Stack and Text to the Form

Let’s add another section to the form with just some textual information about the version of our app.

Section(header: Text("ABOUT")) {
    HStack {
        Text("Version")
        Spacer()
        Text("2.2.1")
    }
}

The new section should look like this on its own:

Add Button to the Form

Finally, let’s add a button to the very bottom of the form, allowing you to reset all of the options to default values.

The complete code for this Settings form should look like this:

struct ContentView: View {
    @State var username: String = ""
    @State var isPrivate: Bool = true
    @State var notificationsEnabled: Bool = false
    @State private var previewIndex = 0
    var previewOptions = ["Always", "When Unlocked", "Never”]

    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("PROFILE")) {
                    TextField("Username", text: $username)
                    Toggle(isOn: $isPrivate) {
                        Text("Private Account")
                    }
                }
                
                Section(header: Text("NOTIFICATIONS")) {
                    Toggle(isOn: $notificationsEnabled) {
                        Text("Enabled")
                    }
                    Picker(selection: $previewIndex, label: Text("Show Previews")) {
                        ForEach(0 ..< previewOptions.count) {
                            Text(self.previewOptions[$0])
                        }
                    }
                }
                
                Section(header: Text("ABOUT")) {
                    HStack {
                        Text("Version")
                        Spacer()
                        Text("2.2.1")
                    }
                }
                
                Section {
                    Button(action: {
                        print("Perform an action here...")
                    }) {
                        Text("Reset All Settings")
                    }
                }
            }
            .navigationBarTitle("Settings")
        }
    }
}

And the final result looks like this:

Related tutorials:

• How to create and use Picker with Form in SwiftUI
• SwiftUI stepper tutorial – how to create and use stepper in SwiftUI
• SwiftUI slider tutorial – how to create and use slider in SwiftUI

Take a look at Apple’s official documentation of Form.