Form di SwiftUI: apa itu, membuat formulir dan mengonfigurasi

Apa itu Form di SwiftUI?

Form adalah kontainer SwiftUI khusus yang dirancang untuk membuat formulir entri data dan layar pengaturan. Form mewarisi perilaku List, tetapi menambahkan gaya platform: di iOS, Form ditampilkan sebagai tabel grouped dengan sudut membulat pada bagian, di macOS — sebagai daftar sistem standar dengan kotak centang dan kontrol.

Berbeda dengan tata letak manual menggunakan VStack dan HStack, Form secara otomatis mengatur jarak antar elemen, menambahkan pemisah, dan menyesuaikan tampilan dengan tema sistem — terang atau gelap. Pengembang hanya mendeskripsikan struktur logis: Section untuk pengelompokan dan kontrol di dalamnya. Form itu sendiri yang memutuskan bagaimana menempatkan Picker, Toggle, atau Stepper secara visual pada platform tertentu.

Form mendukung semua elemen input standar SwiftUI: TextField untuk teks, SecureField untuk kata sandi, Picker untuk pemilihan dari daftar, Toggle untuk aktif/nonaktif, Slider untuk rentang, Stepper untuk nilai bertahap, dan DatePicker untuk tanggal. Setiap elemen secara otomatis menerima gaya yang sesuai dengan HIG (Human Interface Guidelines) Apple pada platform target.

Form vs List: perbandingan kontainer

Meskipun tampilannya mirip, Form dan List menyelesaikan tugas yang berbeda. List adalah kontainer universal untuk menampilkan daftar data yang dapat digulir dengan dukungan aksi geser dan pengeditan baris. Form adalah kontainer khusus untuk entri data dan pengaturan, dioptimalkan untuk gaya sistem kontrol.

List cocok untuk menampilkan data dinamis: umpan berita, chat, katalog produk. Form — untuk layar statis dengan kumpulan bidang yang dapat diprediksi: profil pengguna, pengaturan aplikasi, formulir pendaftaran. Perbedaan utama: elemen Form dapat berupa kontrol interaktif, sedangkan baris List paling sering menampilkan data dan merespons sentuhan dengan navigasi atau aksi.

Menurut Apple Human Interface Guidelines (2025), Form sebaiknya digunakan untuk layar pengaturan dan entri, di mana pada satu layar terdapat 3 hingga 20 kontrol dan pembagian menjadi bagian meningkatkan pemahaman.

Bagian Section di dalam Form

Section adalah blok bangunan utama Form yang memungkinkan pengelompokan elemen yang saling terkait secara logis. Setiap Section dapat memiliki judul, footer, dan jumlah kontrol yang bebas di dalamnya. Sistem secara otomatis menambahkan jarak antar bagian dan membungkus masing-masing dalam blok visual dengan sudut membulat.

Penggunaan Section sangat penting untuk keterbacaan formulir: elemen yang dikelompokkan berdasarkan makna lebih mudah dipahami pengguna. Misalnya, pada layar pengaturan profil, Anda dapat memisahkan ke bagian khusus "Data Pribadi", "Notifikasi", dan "Keamanan". Setiap bagian dapat berisi footer dengan teks penjelas, yang ditampilkan sistem dengan font lebih kecil di bawah kelompok elemen.

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

    Section(header: Text("Notifikasi"),
            footer: Text("Nonaktifkan selama rapat")) {
        Toggle("Push notifications", isOn: $pushEnabled)
        Toggle("Email notifications", isOn: $emailEnabled)
    }
}

Pada contoh, bagian pertama "Profile" berisi dua kolom teks tanpa footer, bagian kedua "Notifications" berisi dua sakelar dengan penjelasan di bawah kelompok. Footer secara otomatis menambahkan jarak dan menggunakan gaya font caption. Section dapat berisi footer tanpa judul atau judul tanpa footer.

Kontrol di dalam Form

Form mendukung semua elemen input standar SwiftUI. Picker di dalam Form secara otomatis ditampilkan sebagai baris navigasi dengan transisi ke layar pemilihan terpisah di iOS. Toggle ditampilkan sebagai baris dengan sakelar yang rata di tepi kanan. TextField menerima gaya input sistem dengan placeholder.

Untuk nilai numerik digunakan Stepper (perubahan bertahap) dan Slider (perubahan halus dalam rentang). DatePicker mendukung beberapa mode: date, time, dateAndTime. Untuk pemilihan warna tersedia ColorPicker. Setiap elemen menyesuaikan diri dengan platform tanpa kode tambahan — di iOS kontrol menggunakan gaya native UIKit, di macOS — AppKit.

Untuk kontrol khusus di dalam Form dapat digunakan View SwiftUI apa pun — kontrol tersebut mewarisi perilaku standar bagian. Namun, disarankan untuk tetap menggunakan elemen sistem, karena elemen tersebut menjamin kepatuhan dengan HIG dan mendukung Accessibility (VoiceOver, Dynamic Type) tanpa konfigurasi tambahan.

Contoh kode Form

Mari kita bahas pembuatan layar pendaftaran menggunakan Form. Formulir berisi empat bagian: data pribadi, pemilihan peran, pengaturan langganan, dan tombol kirim. Digunakan Section untuk pengelompokan dan kontrol standar 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("Data Pribadi")) {
                    TextField("Name", text: $name)
                    TextField("Email", text: $email)
                        .keyboardType(.emailAddress)
                }

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

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

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

    private func submitForm() { }
}

Formulir dibagi menjadi empat Section: data pribadi dengan dua kolom teks, pemilihan peran melalui Picker, persetujuan dengan ketentuan melalui Toggle, dan tombol pendaftaran. Tombol dinonaktifkan sampai pengguna menyetujui ketentuan — ini adalah contoh validasi di dalam Form. NavigationStack menambahkan judul dan memungkinkan Picker membuka layar pemilihan terpisah di iOS.

Formulir pengaturan dengan subbagian

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

                Section(header: Text("Pengingat"),
                        footer: Text("Anda akan menerima notifikasi pada waktu yang dipilih")) {
                    DatePicker("Remind at",
                        selection: $reminderDate,
                        displayedComponents: .hourAndMinute)
                }

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

Contoh ini menunjukkan kombinasi Slider, DatePicker, dan NavigationLink di dalam Form. DatePicker menggunakan mode hourAndMinute untuk hanya menampilkan waktu. NavigationLink di bagian terakhir membuat transisi ke layar pengaturan lanjutan — pola yang umum untuk antarmuka bergaya Settings. Judul dan footer bagian membuat formulir dapat menjelaskan diri sendiri: pengguna langsung memahami ke kelompok mana setiap kontrol termasuk.