Komponen / Form & input
MultiSelect
Memilih beberapa nilai dari daftar dengan pencarian — penanggung jawab tugas, tim proyek, reviewer BAST, tag. Nilai terpilih tampil sebagai Token di dalam field.
Import
tsx
import { MultiSelect, type MultiSelectOption } from '@divistant/circca-react';Props
ref diteruskan ke input pencarian (role="combobox"). Opsi memakai bentuk yang sama dengan Combobox.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| options | MultiSelectOption[] | — | { value, label, description?, group?, disabled?, leadingVisual?, avatar? }. `avatar: true` menampilkan inisial di opsi dan Token. |
| value | string[] | — | Nilai terpilih (terkendali), berurutan sesuai waktu dipilih. |
| defaultValue | string[] | [] | Nilai awal bila tidak terkendali. |
| onValueChange | (value: string[]) => void | — | Dipanggil setiap nilai ditambah atau dihapus. |
| onInputChange | (text: string) => void | — | Setiap teks pencarian berubah — untuk opsi async. |
| filter | ((option, query) => boolean) | false | — | Penyaring kustom; false bila opsi sudah disaring server. |
| loading | boolean | false | "Mencari…" + Skeleton. |
| onCreate | (text: string) => void | — | Aksi "Buat baru" (mis. tag baru) muncul saat teks tidak sama persis dengan opsi. |
| createLabel | (text: string) => ReactNode | `Buat baru "<teks>"` | Label aksi buat baru. |
| emptyMessage | ReactNode | ((text: string) => ReactNode) | — | Pesan saat tidak ada hasil. |
| resultLabel | string | — | Kata benda baris meta, mis. "orang" → "3 dari 12 orang". |
| totalCount | number | — | Total data untuk baris meta. |
| placeholder | string | 'Pilih…' | Tampil hanya bila belum ada nilai terpilih. |
| doneLabel | ReactNode | null | 'Selesai' | Tombol footer yang menutup panel, di samping "N dipilih". null menyembunyikan footer. |
| name | string | — | Nama field form HTML; setiap nilai dikirim sebagai input tersembunyi. |
| invalid | boolean | false | Tampilan error. Otomatis true bila FormField punya `error`. |
| disabled | boolean | false | Nonaktif (opasitas 45%). Otomatis mengikuti FormField. |
| readOnly | boolean | false | Hanya baca: Token tetap terbaca tanpa tombol hapus, daftar tidak bisa dibuka. |
| className | string | — | Kelas tambahan untuk kotak field. |
Sumber
Kode komponen ada di packages/react/src/components/multi-select. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.