Form bertahap

Formulir panjang yang dipecah menjadi beberapa langkah, dengan peninjauan sebelum dikirim.

Contoh

Empat langkah, satu panel isi, dan satu baris aksi yang tidak pernah berpindah tempat. Isi tiap langkah adalah milik halaman; Stepper hanya menunjukkan posisi.

  1. LokasiAlamat penjemputanLangkah sekarang
  2. MaterialJenis dan perkiraanBelum dikerjakan
  3. JadwalTanggal dan jamBelum dikerjakan
  4. TinjauPeriksa lalu kirimBelum dikerjakan

Opsional.

Langkah 1 dari 4

Aturannya

  • Validasi milik halaman, bukan Stepper. Halaman memutuskan sebuah langkah sudah sah atau belum, lalu memindahkan v-model. Komponen tidak pernah menolak perpindahan sendiri.
  • Boleh kembali, tidak boleh melompat.navigable="done" membuat langkah yang sudah diisi bisa dituju kembali dari Stepper-nya; langkah di depan tetap bukan kontrol, karena isinya belum tentu sah.
  • Satu baris aksi, posisi tetap. “Kembali” di kiri, “Lanjut” di kanan, dan di langkah terakhir “Lanjut” berganti menjadi aksi yang sebenarnya — “Kirim permintaan”, bukan “Selesai”.
  • Langkah terakhir adalah peninjauan. Tampilkan apa yang akan dikirim dengan DescriptionList, bukan meminta orang mengingat empat langkah sebelumnya.
  • Konfirmasi hanya di ujung.useConfirm() dipanggil sekali, saat tindakan yang sulit dibatalkan benar-benar dijalankan — bukan di setiap langkah.
  • Beri tahu kalau langkahnya belum lengkap. Contoh ini memakai Alert di atas panel. Jangan hanya mematikan tombolnya tanpa penjelasan.

Kapan jangan dipecah

Form dengan lima field tidak butuh langkah. Pecah hanya kalau isinya benar-benar berurutan (jawaban berikutnya bergantung pada yang sebelumnya), atau kalau satu halaman menjadi terlalu panjang untuk diperiksa sekali lihat. Kalau tidak, satu Card dengan beberapa FormField lebih cepat diselesaikan.