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

Prop	Type	Default	Description
options*	`ComboboxOption[]`	—	Daftar opsi (value, label).
multiple	`boolean`	`false`	Aktifkan multi-select mode.
clearable	`boolean`	`false`	Tampilkan tombol ✕ untuk reset pilihan (semua chip jika multiple).
value	`string \| string[]`	—	Nilai terpilih (single/multiple).
onChange	`(value) => void`	—	Callback saat selection berubah.
placeholder	`string`	`"Select..."`	Placeholder input.
emptyMessage	`string`	`"No matches."`	Pesan saat hasil kosong.
className	`string`	—	Class 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

Combobox

Examples

Props

Tokens Used

Accessibility

Related