Komponen / Form & input

Combobox

Pilihan tunggal dengan pencarian untuk daftar panjang — customer, item lisensi, distributor — dengan aksi "Buat baru" opsional bila data belum ada.

React · BetaFigma · siapFigma Sumber

Kapan dipakai

Gunakan

Pakai untuk daftar lebih dari ±15 opsi atau data master yang terus bertambah: customer, item, distributor, proyek.
Isi `description` untuk membedakan nama yang mirip (kota, NPWP singkat, kategori item).
Aktifkan "Buat baru" hanya bila pengguna memang berhak membuat data itu; buka dialog singkat yang sudah terisi teks yang diketik.
Tulis pesan kosong yang memberi langkah berikutnya: periksa ejaan atau buat data baru.

Hindari

Jangan memakai Combobox untuk 2–15 opsi tetap (termin, status) — pakai Select atau Radio.
Jangan menerima teks bebas sebagai nilai: yang tersimpan selalu value opsi, teks yang tidak cocok dikembalikan saat fokus keluar.
Jangan memuat ribuan opsi sekaligus di klien — cari ke server lewat onInputChange + filter={false}.

GunakanNama mirip dibedakan dengan deskripsi kota/industri.

HindariTiga "Cakra" tanpa keterangan — pengguna menebak.

GunakanKeadaan kosong menyarankan langkah berikutnya + aksi buat baru.

HindariPanel kosong tanpa penjelasan.

Placeholder berupa ajakan mencari dengan objeknya: "Cari customer…", "Cari lisensi atau jasa…".
Label aksi buat baru menyebut objeknya: "Buat customer baru", `Buat customer "Cakra"`.
Pesan kosong: `Tidak ada customer bernama "cakra". Periksa ejaan atau buat customer baru.`
Baris meta "3 dari 128 customer" memakai kata benda yang sama dengan label field.