Form in SwiftUI: What It Is, Creating and Configuring Forms

What Is Form in SwiftUI?

Form is a specialized SwiftUI container designed for creating input forms and settings screens. It inherits the behavior of List but adds platform-specific styles: on iOS, Form displays as a grouped table with rounded section corners; on macOS, it appears as a standard system list with checkboxes and controls.

Unlike manual layout with VStack and HStack, Form automatically arranges spacing between elements, adds separators, and adapts its appearance to the system theme — light or dark. The developer only describes the logical structure: Section for grouping and controls inside. The form itself decides how to visually arrange Picker, Toggle, or Stepper on a specific platform.

Form supports all standard SwiftUI input elements: TextField for text, SecureField for passwords, Picker for list selection, Toggle for on/off, Slider for ranges, Stepper for incremental values, and DatePicker for dates. Each element automatically gets a style matching Apple's HIG (Human Interface Guidelines) on the target platform.

Form vs List: Container Comparison

Despite their visual similarity, Form and List solve different tasks. List is a universal container for displaying scrollable data lists with swipe actions and row editing capabilities. Form is a specialized container for data input and settings, optimized for system control styles.

List is suitable for displaying dynamic data: news feeds, chats, product catalogs. Form is for static screens with a predictable set of fields: user profile, app settings, registration form. The key difference: Form elements can be interactive controls, whereas List rows mostly display data and respond to tap with navigation or action.

According to Apple Human Interface Guidelines (2025), Form should be used for settings and input screens where there are 3 to 20 controls on one screen and dividing them into sections improves usability.

Section Inside Form

Section is the main building block of Form, allowing logically related elements to be grouped together. Each Section can have a header, footer, and any number of controls inside. The system automatically adds spacing between sections and wraps each one in a visual block with rounded corners.

Using Section is critical for form readability: elements grouped by meaning are easier for the user to process. For example, on a profile settings screen, you can separate «Personal Data», «Notifications», and «Security» into individual sections. Each section can contain a footer with explanatory text, which the system displays in a smaller font below the group of elements.

Form {
    Section(header: Text("Profile")) {
        TextField("Name", text: $name)
        TextField("Email", text: $email)
    }

    Section(header: Text("Notifications"),
            footer: Text("Disable during meetings")) {
        Toggle("Push notifications", isOn: $pushEnabled)
        Toggle("Email notifications", isOn: $emailEnabled)
    }
}

In the example, the first section «Profile» contains two text fields without a footer, the second section «Notifications» contains two toggles with an explanation below the group. The footer automatically adds spacing and uses the caption font style. A Section can have a footer without a header or a header without a footer.

Form Controls

Form supports all standard SwiftUI input elements. Picker in Form automatically displays as a navigation row with a transition to a separate selection screen on iOS. Toggle appears as a row with a switch aligned to the right. TextField gets the system input style with a placeholder.

For numeric values, Stepper (incremental change) and Slider (smooth range change) are used. DatePicker supports several modes: date, time, dateAndTime. ColorPicker is available for color selection. Each element adapts to the platform without additional code — on iOS, controls use native UIKit styles; on macOS, AppKit.

For custom controls inside Form, any SwiftUI View can be used — they inherit the standard section behavior. However, it is recommended to stick with system elements, as they guarantee HIG compliance and support Accessibility (VoiceOver, Dynamic Type) without additional configuration.

Form Code Examples

Let's create a registration screen using Form. The form contains four sections: personal data, role selection, subscription settings, and a submit button. Section is used for grouping and standard SwiftUI controls.

struct RegistrationForm: View {
    @State private var name = ""
    @State private var email = ""
    @State private var role = "Developer"
    @State private var agreedToTerms = false

    let roles = ["Developer", "Designer", "Manager"]

    var body: some View {
        NavigationStack {
            Form {
                Section(header: Text("Personal Info")) {
                    TextField("Name", text: $name)
                    TextField("Email", text: $email)
                        .keyboardType(.emailAddress)
                }

                Section(header: Text("Role")) {
                    Picker("Select role", selection: $role) {
                        ForEach(roles, id: \.self) { role in
                            Text(role).tag(role)
                        }
                    }
                }

                Section {
                    Toggle("Agree to terms", isOn: $agreedToTerms)
                }

                Section {
                    Button("Register") {
                        submitForm()
                    }
                    .disabled(!agreedToTerms)
                }
            }
            .navigationTitle("Registration")
        }
    }

    private func submitForm() { }
}

The form is divided into four Section blocks: personal data with two text fields, role selection via Picker, agreement to terms via Toggle, and a registration button. The button is disabled until the user agrees to the terms — this is an example of validation inside Form. NavigationStack adds a title and allows Picker to open a separate selection screen on iOS.

Settings Form with Subsections

struct SettingsForm: View {
    @State private var volume: Double = 0.5
    @State private var isDarkMode = false
    @State private var reminderDate = Date()

    var body: some View {
        NavigationStack {
            Form {
                Section(header: Text("Appearance")) {
                    Toggle("Dark mode", isOn: $isDarkMode)
                    Slider(value: $volume, in: 0...1) {
                        Text("Volume")
                    }
                }

                Section(header: Text("Reminders"),
                        footer: Text("You'll get a notification at the selected time")) {
                    DatePicker("Remind at",
                        selection: $reminderDate,
                        displayedComponents: .hourAndMinute)
                }

                Section {
                    NavigationLink("Advanced Settings",
                        destination: AdvancedSettingsView())
                }
            }
            .navigationTitle("Settings")
        }
    }
}

This example demonstrates a combination of Slider, DatePicker, and NavigationLink inside Form. DatePicker uses the hourAndMinute mode to display only the time. NavigationLink in the last section creates a transition to an advanced settings screen — a common pattern for Settings-like interfaces. Section headers and footers make the form self-documenting: the user immediately understands which group each control belongs to.