Form i SwiftUI: vad det är, skapa formulär och konfigurera

Vad är Form i SwiftUI?

Form är en specialiserad SwiftUI-container avsedd för att skapa datainmatningsformulär och inställningsskärmar. Den ärver List-beteendet men lägger till plattformsstilar: på iOS visas Form som en grupperad tabell med rundade hörn på sektionerna, på macOS som en standardsystemlista med kryssrutor och kontroller.

Till skillnad från manuell layout med VStack och HStack placerar Form automatiskt ut avstånd mellan element, lägger till avgränsare och anpassar utseendet till systemtemat — ljust eller mörkt. Utvecklaren beskriver bara den logiska strukturen: Section för gruppering och kontrollerna inuti. Formuläret bestämmer själv hur Picker, Toggle eller Stepper ska placeras visuellt på en specifik plattform.

Form stödjer alla standardmässiga SwiftUI-inmatningselement: TextField för text, SecureField för lösenord, Picker för val från lista, Toggle för på/av, Slider för intervall, Stepper för stegvisa värden och DatePicker för datum. Varje element får automatiskt en stil som överensstämmer med HIG (Human Interface Guidelines) från Apple på målplattformen.

Form vs List: jämförelse av containrar

Trots den yttre likheten löser Form och List olika uppgifter. List är en universell container för att visa rullbara datalistor med möjlighet till swipe-åtgärder och radredigering. Form är en specialiserad container för datainmatning och inställningar, optimerad för kontrollernas systemstilar.

List passar för att visa dynamiska data: nyhetsflöden, chattar, produktkataloger. Form — för statiska skärmar med en förutsägbar uppsättning fält: användarprofil, appinställningar, registreringsformulär. Den viktigaste skillnaden: Form-elementen kan vara interaktiva kontroller, medan List-raderna oftast visar data och reagerar på tryck med navigering eller en åtgärd.

Enligt Apple Human Interface Guidelines (2025) bör Form användas för inställnings- och inmatningsskärmar där det på en skärm finns 3 till 20 kontroller och där indelning i sektioner förbättrar uppfattningen.

Section-sektioner i Form

Section är Forms huvudsakliga byggsten som gör det möjligt att gruppera logiskt relaterade element. Varje Section kan ha en rubrik, en sidfot och valfritt antal kontroller inuti. Systemet lägger automatiskt till avstånd mellan sektionerna och omsluter varje sektion i ett visuellt block med rundade hörn.

Att använda Section är avgörande för formulärets läsbarhet: element som grupperas efter betydelse uppfattas lättare av användaren. På profilinställningsskärmen kan man till exempel dela upp i separata sektioner "Personuppgifter", "Aviseringar" och "Säkerhet". Varje sektion kan innehålla en sidfot med förklarande text som systemet visar med mindre typsnitt under elementgruppen.

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

    Section(header: Text("Aviseringar"),
            footer: Text("Inaktivera under möten")) {
        Toggle("Push notifications", isOn: $pushEnabled)
        Toggle("Email notifications", isOn: $emailEnabled)
    }
}

I exemplet innehåller den första sektionen "Profile" två textfält utan sidfot, den andra sektionen "Notifications" två reglage med en förklaring under gruppen. Sidfoten lägger automatiskt till ett avstånd och använder caption-teckensnittsstilen. Section kan innehålla en sidfot utan rubrik eller en rubrik utan sidfot.

Kontroller i Form

Form stödjer alla standardmässiga SwiftUI-inmatningselement. Picker i Form visas automatiskt som en navigeringsrad med övergång till en separat valskärm på iOS. Toggle visas som en rad med ett reglage som är justerat mot högerkanten. TextField får systemets inmatningsstil med en placeholder.

För numeriska värden används Stepper (stegvis ändring) och Slider (jämn ändring inom ett intervall). DatePicker stödjer flera lägen: date, time, dateAndTime. För färgval finns ColorPicker. Varje element anpassas till plattformen utan extra kod — på iOS använder kontrollerna UIKit:s inbyggda stilar, på macOS AppKit.

För anpassade kontroller i Form kan valfria SwiftUI Views användas — de ärver sektionens standardbeteende. Men det rekommenderas att hålla sig till systemelementen, eftersom de garanterar överensstämmelse med HIG och stödjer Accessibility (VoiceOver, Dynamic Type) utan ytterligare konfigurering.

Kodexempel för Form

Vi tittar på att skapa en registreringsskärm med Form. Formuläret innehåller fyra sektioner: personuppgifter, rollval, prenumerationsinställningar och en skickaknapp. Section används för gruppering och standardkontroller i SwiftUI.

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

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

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

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

    private func submitForm() { }
}

Formuläret är uppdelat i fyra Section: personuppgifter med två textfält, rollval via Picker, samtycke till villkoren via Toggle och registreringsknappen. Knappen är inaktiverad tills användaren samtycker till villkoren — detta är ett exempel på validering i Form. NavigationStack lägger till en rubrik och gör att Picker kan öppna en separat valskärm på iOS.

Inställningsformulär med undersektioner

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

                Section(header: Text("Påminnelser"),
                        footer: Text("Du får en avisering vid vald tid")) {
                    DatePicker("Remind at",
                        selection: $reminderDate,
                        displayedComponents: .hourAndMinute)
                }

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

Detta exempel visar kombinationen Slider, DatePicker och NavigationLink i Form. DatePicker använder läget hourAndMinute för att endast visa tiden. NavigationLink i den sista sektionen skapar en övergång till skärmen för avancerade inställningar — ett vanligt mönster för Settings-liknande gränssnitt. Sektionernas rubriker och sidfötter gör formuläret självdokumenterande: användaren förstår direkt vilken grupp varje kontroll tillhör.