Komponen / Form & input
Stepper
Menambah/mengurangi angka kecil: qty lisensi, jumlah termin, durasi kontrak. Field angka dengan kotak panah naik/turun ala macOS; tetap bisa diketik langsung.
Import
tsx
import { Stepper } from '@divistant/circca-react';Props
Ref menunjuk <input role="spinbutton">. Juga menerima atribut <input> lain (name, autoFocus, aria-label, …).
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| value | number | null | — | Nilai terkendali; null = kosong. |
| defaultValue | number | null | null | Nilai awal (tak terkendali). |
| onValueChange | (value: number | null) => void | — | Dipanggil setiap kali nilai berubah (panah, keyboard, ketik). |
| min | number | 0 | Batas bawah; panah turun nonaktif di batas. Angka negatif harus eksplisit. |
| max | number | — | Batas atas; panah naik nonaktif di batas. |
| step | number | 1 | Selisih per langkah; PageUp/PageDown melompat 10 × step. Desimal step menentukan desimal tampilan. |
| size | 'sm' | 'md' | 'md' | Tinggi 24 / 28 (varian Figma Small / Medium). |
| suffix | ReactNode | — | Satuan di belakang angka: "lisensi", "bulan". |
| decrementLabel | string | 'Kurangi' | Label aksesibel panah turun. |
| incrementLabel | string | 'Tambah' | Label aksesibel panah naik. |
| invalid | boolean | false | Tampilan error. Otomatis true bila FormField punya `error`. |
| disabled | boolean | false | Nonaktif. Otomatis mengikuti FormField. |
| readOnly | boolean | false | Hanya baca (dokumen sudah submit) — panah disembunyikan. |
| fieldClassName | string | — | Kelas kotak field; lebar bawaan 64 (`w-16`). Pakai `w-24` untuk angka ribuan. |
| className | string | — | Kelas pembungkus field + panah. |
Sumber
Kode komponen ada di packages/react/src/components/stepper. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.