Anatomi
Jenis dan variasi
States
Terdapat 5 states untuk Stepper, yakni Default, Filled, Focused, dan Disabled. Berikut contoh gambar dan penjelasannya:
Default
Digunakkan apabila ingin menunjukkan bahwa pengguna belum berinteraksi dengan komponen tersebut.
Filled
Digunakkan apabila ingin menunjukkan bahwa pengguna sudah berinteraksi dengan komponen tersebut.
Focused
Digunakan untuk menunjukkan bahwa komponen sedang dalam keadaan aktif atau dipilih oleh pengguna, biasanya ditandai dengan highlight atau border khusus untuk memberi tahu pengguna bahwa mereka dapat berinteraksi dengan komponen tersebut.
Disabled
Digunakkan apabila ingin menunjukkan bahwa pengguna tidak bisa menggunakan komponen tersebut karena ada sebuah aturan yang melarang pengguna.
Error
Digunakan ketika ingin menunjukkan ke pengguna bahwa ada hal yang salah yang telah dilakukan di area komponen ini yang harus dikomunikasikan secara jelas ke pengguna.
Panduan penggunaan
Gunakan Stepper apabila kamu ingin pengguna menginput sebuah value angka yang bukan tanggal.
Pengguna bisa menambah atau mengurang jumlah angka menggunakan Stepper ini.
Contoh: Pengguna diminta untuk membeli alat pensil, pengguna bisa menambah atau mengurangi jumlah pensil tersebut.
Disarankan
Menggunakan copy atau elemen visual lainnya untuk menjelaskan konteks.
Dihindari
Use concise, easy to scan, and clear button labels to indicate the next action to the user.
Gunakan penjelasan konteks
Gunakan komponen ini dengan sebuah text atau elemen visual di sebelah untuk menjelaskan konteks jumlah yang harus dipilih itu untuk apa.
Hindari komponen bersebelahan
Jangan menggunakan komponen ini bersebelahan satu sama lain tanpa ada konteks, karena dapat membingungkan pengguna untuk tau harus melakukan apa.