Live Docs

Advanced /

stable

Combobox

Input + dropdown searchable untuk memilih opsi — mendukung single select maupun multi-select (multiple values / tags). Ekuivalen 'select2 multiple' di dunia React.

import { Combobox } from "@naraya/ui";

Examples

Single select

Selected: react

const [value, setValue] = useState("react");
<Combobox options={options} value={value} onChange={setValue} />

Multiple select

TypeScript

Selected: typescript

const [value, setValue] = useState<string[]>([]);
<Combobox multiple options={options} value={value} onChange={setValue} />

Clearable (single + multiple)

Single: next

ReactTypeScript

Multiple: react, typescript

// Single — tombol ✕ reset ke kosong
<Combobox clearable options={options} value={value} onChange={setValue} />

// Multiple — tombol ✕ menghapus SEMUA chip sekaligus
// (✕ di tiap chip tetap untuk hapus satu-satu)
<Combobox multiple clearable options={options} value={value} onChange={setValue} />

Props

PropTypeDefaultDescription
options*ComboboxOption[]Daftar opsi (value, label).
multiplebooleanfalseAktifkan multi-select mode.
clearablebooleanfalseTampilkan tombol ✕ untuk reset pilihan (semua chip jika multiple).
valuestring | string[]Nilai terpilih (single/multiple).
onChange(value) => voidCallback saat selection berubah.
placeholderstring"Select..."Placeholder input.
emptyMessagestring"No matches."Pesan saat hasil kosong.
classNamestringClass tambahan wrapper.

Tokens Used

--bg-surface

Control/panel background

--border-subtle

Control/panel border

--color-primary

Selected/active option accent

--text-main

Option text color

Accessibility

  • Input memakai role='combobox' dengan aria-expanded.
  • Panel opsi menggunakan role='listbox' dan opsi role='option'.
  • Mode multiple mendukung Backspace untuk remove chip terakhir.