Komponen / Form & input
Combobox
Pilihan tunggal dengan pencarian untuk daftar panjang — customer, item lisensi, distributor — dengan aksi "Buat baru" opsional bila data belum ada.
Import
tsx
import { Combobox, type ComboboxOption } from '@divistant/circca-react';Props
ref diteruskan ke <input role="combobox">. id, required, disabled, readOnly, invalid, dan aria-describedby otomatis mengikuti FormField.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| options | ComboboxOption[] | — | Daftar opsi: { value, label, description?, group?, disabled?, leadingVisual?, avatar? }. |
| value | string | null | — | Nilai terpilih (terkendali). null = kosong. |
| defaultValue | string | null | null | Nilai awal bila tidak terkendali. |
| onValueChange | (value: string | null, option: ComboboxOption | null) => void | — | Dipanggil saat opsi dipilih atau isian dikosongkan. |
| onInputChange | (text: string) => void | — | Setiap teks berubah — untuk memuat opsi dari server. |
| filter | ((option, query) => boolean) | false | — | Penyaring kustom. Bawaan: memuat teks, tidak peka huruf besar, juga mencari di deskripsi. false = opsi sudah disaring di luar. |
| loading | boolean | false | State=Loading: "Mencari…" + tiga baris Skeleton, listbox aria-busy. |
| onCreate | (text: string) => void | — | Mengaktifkan aksi "Buat baru" di footer (properti Figma Create action). Disembunyikan bila teks sama persis dengan opsi yang ada. |
| createLabel | (text: string) => ReactNode | `Buat baru "<teks>"` | Label aksi buat baru, mis. `Buat customer "${teks}"`. |
| emptyMessage | ReactNode | ((text: string) => ReactNode) | `Tidak ada hasil untuk "<teks>".` | Pesan State=Empty. |
| resultLabel | string | — | Kata benda baris meta: "customer" → "3 dari 128 customer". Tanpa ini baris meta tidak tampil. |
| totalCount | number | — | Total data untuk baris meta bila opsi hanya sebagian (server). Bawaan options.length. |
| placeholder | string | 'Cari…' | Teks saat kosong. |
| size | 'sm' | 'md' | 'lg' | 'md' | Tinggi 24 / 28 / 36, sama dengan Input. |
| leadingVisual | Visual | — | Ikon di kiri, mis. Buildings untuk customer. |
| name | string | — | Nama field form HTML; value (bukan label) dikirim lewat input tersembunyi. |
| invalid | boolean | false | Tampilan error. Otomatis true bila FormField punya `error`. |
| disabled | boolean | false | Nonaktif. Otomatis mengikuti FormField. |
| readOnly | boolean | false | Hanya baca: nilai tetap kontras penuh, daftar tidak bisa dibuka, ikon selector disembunyikan. |
| className | string | — | Kelas tambahan untuk kotak field. |
Sumber
Kode komponen ada di packages/react/src/components/combobox. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.