Komponen / Navigasi
Steps
Langkah wizard untuk form multi-halaman: posisi pengguna saat mengisi, mis. buat PO customer Customer → Nilai → Penagihan → Tinjau. Bukan status dokumen — untuk tahap proses bisnis pakai StagePath.
Import
tsx
import { Steps } from '@divistant/circca-react';Props · Steps
Dirender sebagai <nav> berisi <ol>. Juga menerima atribut <nav> lainnya. Fungsi getStepStates(steps, current) juga diekspor.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| steps | StepsItem[] | — | { key, label, description?, error?, state? }. Label = properti Figma "Label", description = "Description". |
| current | string | — | Kunci langkah yang sedang diisi. Sebelumnya otomatis Completed, sesudahnya Upcoming. |
| onStepClick | (key: string, index: number) => void | — | Bila diisi, langkah yang sudah dilewati menjadi tombol untuk kembali. Langkah berikutnya tidak bisa diklik. |
| compact | 'auto' | 'always' | 'never' | 'auto' | Tampilan ringkas "Langkah 2 dari 4". auto = ringkas bila lebar wadah < 36rem (container query). |
| aria-label | string | 'Langkah' | Nama navigasi untuk pembaca layar, mis. "Langkah buat PO customer". |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Props · StepsItem
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| key | string | — | Kunci unik langkah. |
| label | ReactNode | — | Nama langkah, 1–2 kata benda. |
| description | ReactNode | — | Keterangan Footnote di bawah label, mis. ringkasan isian langkah yang sudah selesai. |
| error | boolean | false | Isian langkah ini belum valid → state Error. |
| state | 'completed' | 'current' | 'upcoming' | 'error' | — | Menimpa state hasil hitungan (jarang perlu). |
Sumber
Kode komponen ada di packages/react/src/components/steps. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.