Form in SwiftUI: wat is het, een formulier maken en configureren

Wat is Form in SwiftUI?

Form is een gespecialiseerde SwiftUI-container voor het maken van invoerformulieren en instellingenschermen. Het erft het gedrag van List, maar voegt platformstijlen toe: op iOS wordt Form weergegeven als een gegroepeerde tabel met afgeronde hoeken van secties, op macOS als een standaard systeemlijst met selectievakjes en besturingselementen.

In tegenstelling tot handmatige opmaak met VStack en HStack plaatst Form automatisch afstanden tussen elementen, voegt scheidingslijnen toe en past het uiterlijk aan het systeemthema aan — licht of donker. De ontwikkelaar beschrijft alleen de logische structuur: Section voor groepering en de besturingselementen erin. Het formulier beslist zelf hoe Picker, Toggle of Stepper visueel op een specifiek platform wordt geplaatst.

Form ondersteunt alle standaard SwiftUI-invoerelementen: TextField voor tekst, SecureField voor wachtwoorden, Picker voor selectie uit een lijst, Toggle voor aan/uit, Slider voor bereiken, Stepper voor stapsgewijze waarden en DatePicker voor datum. Elk element krijgt automatisch een stijl conform HIG (Human Interface Guidelines) van Apple op het doelplatform.

Form vs List: vergelijking van containers

Ondanks de uiterlijke overeenkomst lossen Form en List verschillende taken op. List is een universele container voor het weergeven van scrollbare datalijsten met de mogelijkheid tot swipe-acties en het bewerken van rijen. Form is een gespecialiseerde container voor gegevensinvoer en instellingen, geoptimaliseerd voor systeemstijlen van besturingselementen.

List is geschikt voor het weergeven van dynamische gegevens: nieuwsfeeds, chats, productcatalogi. Form — voor statische schermen met een voorspelbare set velden: gebruikersprofiel, app-instellingen, registratieformulier. Het belangrijkste verschil: elementen van Form kunnen interactieve besturingselementen zijn, terwijl rijen van List meestal gegevens weergeven en op een tik reageren met navigatie of een actie.

Volgens Apple Human Interface Guidelines (2025) moet Form worden gebruikt voor instellingen- en invoerschermen, waar zich op één scherm 3 tot 20 besturingselementen bevinden en de indeling in secties de perceptie verbetert.

Secties Section binnen Form

Section is het belangrijkste bouwblok van Form, waarmee logisch gerelateerde elementen kunnen worden gegroepeerd. Elke Section kan een kop, een voettekst en een willekeurig aantal besturingselementen bevatten. Het systeem voegt automatisch afstanden tussen secties toe en wikkelt elke sectie in een visueel blok met afgeronde hoeken.

Het gebruik van Section is cruciaal voor de leesbaarheid van het formulier: elementen die op betekenis zijn gegroepeerd, worden door de gebruiker gemakkelijker waargenomen. Op het profielinstellingenscherm kan men bijvoorbeeld aparte secties „Persoonlijke gegevens", „Meldingen" en „Beveiliging" maken. Elke sectie kan een voettekst met verklarende tekst bevatten, die het systeem in een kleiner lettertype onder de groep elementen weergeeft.

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

    Section(header: Text("Meldingen"),
            footer: Text("Uitschakelen tijdens vergaderingen")) {
        Toggle("Push notifications", isOn: $pushEnabled)
        Toggle("Email notifications", isOn: $emailEnabled)
    }
}

In het voorbeeld bevat de eerste sectie „Profile" twee tekstvelden zonder voettekst, de tweede sectie „Notifications" twee schakelaars met een uitleg onder de groep. De voettekst voegt automatisch een afstand toe en gebruikt de caption-lettertypestijl. Section kan een voettekst zonder kop of een kop zonder voettekst bevatten.

Besturingselementen in Form

Form ondersteunt alle standaard SwiftUI-invoerelementen. Picker in Form wordt op iOS automatisch weergegeven als een navigatieregel met doorgang naar een apart selectiescherm. Toggle wordt weergegeven als een regel met een schakelaar die rechts is uitgelijnd. TextField krijgt de systeemstijl voor invoer met een placeholder.

Voor numerieke waarden worden Stepper (stapsgewijze wijziging) en Slider (geleidelijke wijziging in een bereik) gebruikt. DatePicker ondersteunt meerdere modi: date, time, dateAndTime. Voor kleurselectie is ColorPicker beschikbaar. Elk element past zich zonder extra code aan het platform aan — op iOS gebruiken besturingselementen de native UIKit-stijlen, op macOS AppKit.

Voor aangepaste besturingselementen binnen Form kunnen alle SwiftUI Views worden gebruikt — ze erven het standaardgedrag van de sectie. Het wordt echter aanbevolen bij systeemelementen te blijven, omdat ze conformiteit met HIG garanderen en Accessibility (VoiceOver, Dynamic Type) ondersteunen zonder extra configuratie.

Codevoorbeelden van Form

Laten we het maken van een registratiescherm met Form bekijken. Het formulier bevat vier secties: persoonlijke gegevens, rolselectie, abonnementsinstellingen en een verzendknop. Section wordt gebruikt voor groepering en de standaard SwiftUI-besturingselementen.

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("Persoonlijke gegevens")) {
                    TextField("Name", text: $name)
                    TextField("Email", text: $email)
                        .keyboardType(.emailAddress)
                }

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

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

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

    private func submitForm() { }
}

Het formulier is verdeeld in vier Section: persoonlijke gegevens met twee tekstvelden, rolselectie via Picker, akkoord met de voorwaarden via Toggle en de registratieknop. De knop is uitgeschakeld totdat de gebruiker akkoord gaat met de voorwaarden — dit is een voorbeeld van validatie binnen Form. NavigationStack voegt een titel toe en stelt Picker in staat op iOS een apart selectiescherm te openen.

Instellingenformulier met sub-secties

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("Weergave")) {
                    Toggle("Dark mode", isOn: $isDarkMode)
                    Slider(value: $volume, in: 0...1) {
                        Text("Volume")
                    }
                }

                Section(header: Text("Herinneringen"),
                        footer: Text("U ontvangt een melding op het geselecteerde tijdstip")) {
                    DatePicker("Remind at",
                        selection: $reminderDate,
                        displayedComponents: .hourAndMinute)
                }

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

Dit voorbeeld toont de combinatie van Slider, DatePicker en NavigationLink binnen Form. DatePicker gebruikt de modus hourAndMinute om alleen de tijd weer te geven. NavigationLink in de laatste sectie creëert een doorgang naar het scherm voor geavanceerde instellingen — een veelgebruikt patroon voor Settings-achtige interfaces. De koppen en voetteksten van secties maken het formulier zelfdocumenterend: de gebruiker begrijpt meteen bij welke groep elk besturingselement hoort.