aksesin.Design system
Coba prototype

Stepper

Indikator langkah untuk alur bertahap.

Basis: Elemen <ol> presentasional. Langkah aktif ditandai aria-current="step"; langkah sebelumnya dirender sebagai selesai.

src/components/ui/stepper.tsx

Mendatar

  1. Isi formulirData dasar laporan
  2. 2
    Unggah buktiDokumen pendukung
  3. 3
    VerifikasiDitinjau tim
  4. 4
    SelesaiLaporan terkirim

Perkembangan

Nilai current bersifat nol-basis; seluruh langkah sebelumnya otomatis ditandai selesai.

  1. 1
    Isi formulirData dasar laporan
  2. 2
    Unggah buktiDokumen pendukung
  3. 3
    VerifikasiDitinjau tim
  4. 4
    SelesaiLaporan terkirim
  1. Isi formulirData dasar laporan
  2. Unggah buktiDokumen pendukung
  3. 3
    VerifikasiDitinjau tim
  4. 4
    SelesaiLaporan terkirim
  1. Isi formulirData dasar laporan
  2. Unggah buktiDokumen pendukung
  3. VerifikasiDitinjau tim
  4. 4
    SelesaiLaporan terkirim

Menurun

  1. Isi formulirData dasar laporan
  2. Unggah buktiDokumen pendukung
  3. 3
    VerifikasiDitinjau tim
  4. 4
    SelesaiLaporan terkirim

Props

PropTipeBawaanKeterangan
stepsArray<{ label: string; description?: string }>—Daftar langkah.
currentnumber—Indeks langkah aktif, dimulai dari 0.
orientation"horizontal" | "vertical""horizontal"Arah susunan langkah.