Stepper

Stepper digunakan untuk menampilkan tahapan proses yang berurutan, membantu pengguna memahami posisi mereka dalam suatu alur.

Pola ini memberikan konteks progres, memandu pengguna menyelesaikan langkah-langkah, dan memastikan setiap tahapan mudah diikuti secara visual.

Penggunaan

Gunakan Stepper untuk proses yang memerlukan beberapa langkah berurutan seperti form pendaftaran, pengisian data, pembayaran, atau alur verifikasi.

Pola ini membantu pengguna memahami berapa banyak tahapan yang harus diselesaikan, serta memberikan indikasi status seperti langkah aktif, selesai, atau belum dimulai.

Anatomi

Varian

Stepper Horizontal

•Menampilkan langkah secara berurutan dari kiri ke kanan.
•Cocok untuk proses dengan jumlah langkah sedikit hingga sedang (2–6 langkah).
•Ideal untuk alur seperti pendaftaran, pembayaran, atau proses setup singkat.
•Memberikan gambaran visual progres yang linear dan ringkas

Stepper Vertical

•Menampilkan langkah secara urut dari atas ke bawah.
•Cocok untuk proses yang melibatkan konten atau form panjang di setiap langkah.
•Umumnya digunakan pada dashboard setup, multi-form page, atau alur verifikasi.
•Menyediakan struktur hierarkis yang mudah dibaca, terutama untuk proses kompleks.

State (keadaan)

Completed

Menandakan langkah yang telah diselesaikan.

Active

Menandakan angkah yang sedang dikerjakan pengguna.

Incomplete

Menandakan langkah yang belum bisa diakses atau belum dimulai.

Cara Penggunaan yang Disarankan

✅ Disarankan

Gunakan maksimal 3–5 langkah agar tampilan tetap sederhana dan mudah diikuti. Tampilkan label yang singkat dan jelas untuk setiap langkah.

❌ Dihindari

Jangan menampilkan terlalu banyak langkah dalam satu tampilan, karena akan membuat pengguna kewalahan..

Penerapan

Menunjukkan Jumlah Tahapan Alur

Stepper dapat digunakan untuk memperjelas jumlah langkah yang harus dilalui pengguna dalam satu proses. Contohnya pada halaman pengajuan atau formulir bertahap, di mana setiap langkah menampilkan isian atau instruksi berbeda (misalnya: Data Diri → Dokumen → Konfirmasi → Selesai).

Spesifikasi