Multi Combobox

Multi Combobox is a combobox that keeps more than one answer, each removable as a chip.

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/multi-combobox.tsx
Import from@viliha/vui-react/multi-combobox

The exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.

Usage

multi-combobox-demo.tsx
import { MultiCombobox } from "@viliha/vui-react/multi-combobox";

Exports

Everything this family exports. They are read from the source, so this list is what the package actually ships.

PropTypeDefault
MultiComboboxcomponent—

MultiCombobox props

PropTypeDefaultWhat it does
valuestring[]—Selected option values.
onValueChange(value: string[]) => void—
options?SelectOption[]—Static options. Omit when using `source` (async).
source?AsyncOptionSource—Async source: lazy-load on open + debounced search, and batch-resolve the selected values' labels via its `resolveOptions`. Takes over from `options`.
resetKey?string—Invalidate the async cache + reload on next open (cascade parent change).
id?string—
ariaLabel?string—
disabled?booleanfalse
placeholder?string"Select…"
staticId?string—The id the static edition pairs this trigger with its panel by.
searchPlaceholder?string"Search…"
emptyText?string"No matches"
loadingText?string"Loading…"
errorText?string"Couldn't load — retry"
invalid?booleanfalse
className?string—

Customize

Every value this component draws comes from the theme: the colours, the radius, the control height and the type scale. Change a token and this moves with everything else, which is the difference between theming the product and overriding a component. See Theming for the token contract, and Swapping defaults for replacing the markup itself.