Form in SwiftUI: cos'è, creazione e configurazione di moduli

Cos'è Form in SwiftUI?

Form è un contenitore specializzato di SwiftUI progettato per creare moduli di input e schermate di impostazioni. Eredita il comportamento di List ma aggiunge stili specifici della piattaforma: su iOS, Form viene visualizzato come una tabella raggruppata con angoli arrotondati delle sezioni; su macOS, appare come un elenco di sistema standard con caselle di controllo e controlli.

A differenza del layout manuale con VStack e HStack, Form organizza automaticamente la spaziatura tra gli elementi, aggiunge separatori e adatta il suo aspetto al tema di sistema — chiaro o scuro. Lo sviluppatore descrive solo la struttura logica: Section per il raggruppamento e i controlli all'interno. Il modulo stesso decide come disporre visivamente Picker, Toggle o Stepper su una piattaforma specifica.

Form supporta tutti gli elementi di input standard di SwiftUI: TextField per il testo, SecureField per le password, Picker per la selezione da elenco, Toggle per attivare/disattivare, Slider per intervalli, Stepper per valori incrementali e DatePicker per le date. Ogni elemento ottiene automaticamente uno stile conforme alle HIG (Human Interface Guidelines) di Apple sulla piattaforma di destinazione.

Form vs List: confronto contenitori

Nonostante la loro somiglianza visiva, Form e List risolvono compiti diversi. List è un contenitore universale per visualizzare elenchi di dati scorrevoli con azioni di scorrimento e modifica delle righe. Form è un contenitore specializzato per l'immissione di dati e le impostazioni, ottimizzato per gli stili di controllo del sistema.

List è adatto per visualizzare dati dinamici: feed di notizie, chat, cataloghi di prodotti. Form è per schermate statiche con un insieme prevedibile di campi: profilo utente, impostazioni dell'app, modulo di registrazione. La differenza chiave: gli elementi di Form possono essere controlli interattivi, mentre le righe di List generalmente visualizzano dati e rispondono al tocco con navigazione o azione.

Secondo le Apple Human Interface Guidelines (2025), Form dovrebbe essere utilizzato per schermate di impostazioni e input dove ci sono da 3 a 20 controlli su una schermata e dividerli in sezioni migliora l'usabilità.

Sezioni Section all'interno di Form

Section è il blocco di costruzione principale di Form, che consente di raggruppare elementi logicamente correlati. Ogni Section può avere un'intestazione, un piè di pagina e un numero qualsiasi di controlli all'interno. Il sistema aggiunge automaticamente spaziatura tra le sezioni e avvolge ciascuna in un blocco visivo con angoli arrotondati.

Usare Section è fondamentale per la leggibilità del modulo: gli elementi raggruppati per significato sono più facili da elaborare per l'utente. Ad esempio, su una schermata di impostazioni del profilo, si possono separare «Dati personali», «Notifiche» e «Sicurezza» in sezioni individuali. Ogni sezione può contenere un piè di pagina con testo esplicativo che il sistema visualizza in un carattere più piccolo sotto il gruppo di elementi.

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

    Section(header: Text("Notifiche"),
            footer: Text("Disattiva durante le riunioni")) {
        Toggle("Push notifications", isOn: $pushEnabled)
        Toggle("Email notifications", isOn: $emailEnabled)
    }
}

Nell'esempio, la prima sezione «Profile» contiene due campi di testo senza piè di pagina, la seconda sezione «Notifications» contiene due interruttori con una spiegazione sotto il gruppo. Il piè di pagina aggiunge automaticamente spaziatura e utilizza lo stile di carattere caption. Una Section può avere un piè di pagina senza intestazione o un'intestazione senza piè di pagina.

Controlli in Form

Form supporta tutti gli elementi di input standard di SwiftUI. Picker in Form viene visualizzato automaticamente come una riga di navigazione con transizione a una schermata di selezione separata su iOS. Toggle appare come una riga con un interruttore allineato a destra. TextField ottiene lo stile di input di sistema con un segnaposto.

Per i valori numerici, si utilizzano Stepper (modifica incrementale) e Slider (modifica graduale in un intervallo). DatePicker supporta diverse modalità: date, time, dateAndTime. ColorPicker è disponibile per la selezione del colore. Ogni elemento si adatta alla piattaforma senza codice aggiuntivo — su iOS, i controlli utilizzano stili nativi UIKit; su macOS, AppKit.

Per controlli personalizzati all'interno di Form, è possibile utilizzare qualsiasi SwiftUI View — ereditano il comportamento standard della sezione. Tuttavia, si raccomanda di attenersi agli elementi di sistema, poiché garantiscono la conformità alle HIG e supportano l'accessibilità (VoiceOver, Dynamic Type) senza configurazione aggiuntiva.

Esempi di codice Form

Creiamo una schermata di registrazione utilizzando Form. Il modulo contiene quattro sezioni: dati personali, selezione del ruolo, impostazioni di abbonamento e un pulsante di invio. Si utilizza Section per il raggruppamento e i controlli standard di 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("Informazioni personali")) {
                    TextField("Name", text: $name)
                    TextField("Email", text: $email)
                        .keyboardType(.emailAddress)
                }

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

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

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

    private func submitForm() { }
}

Il modulo è diviso in quattro Section: dati personali con due campi di testo, selezione del ruolo tramite Picker, accettazione dei termini tramite Toggle e un pulsante di registrazione. Il pulsante è disabilitato finché l'utente non accetta i termini — questo è un esempio di validazione all'interno di Form. NavigationStack aggiunge un titolo e consente a Picker di aprire una schermata di selezione separata su iOS.

Modulo di impostazioni con sottosezioni

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

                Section(header: Text("Promemoria"),
                        footer: Text("Riceverai una notifica all'orario selezionato")) {
                    DatePicker("Remind at",
                        selection: $reminderDate,
                        displayedComponents: .hourAndMinute)
                }

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

Questo esempio dimostra una combinazione di Slider, DatePicker e NavigationLink all'interno di Form. DatePicker utilizza la modalità hourAndMinute per visualizzare solo l'ora. NavigationLink nell'ultima sezione crea una transizione verso una schermata di impostazioni avanzate — un modello comune per interfacce stile Impostazioni. Le intestazioni e i piè di pagina delle sezioni rendono il modulo auto-documentante: l'utente capisce immediatamente a quale gruppo appartiene ogni controllo.