Installation
Nothing to add. This component ships as source in your download, so it is already in your project.
src/vui/combobox.tsx@viliha/vui-react/comboboxThe 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
import { Combobox } from "@viliha/vui-react/combobox";Exports
Everything this family exports. They are read from the source, so this list is what the package actually ships.
| Prop | Type | Default |
|---|---|---|
| Combobox | component | — |
Combobox props
| Prop | Type | Default | What it does |
|---|---|---|---|
| value | string | — | |
| onValueChange | (value: string) => void | — | |
| options? | SelectOption[] | — | Static options. Omit when using `source` (async). |
| source? | AsyncOptionSource | — | Async option source (lazy load on open + debounced search). Takes over from `options`; the list is fetched on demand, never on mount. |
| resetKey? | string | — | Changing this invalidates the async cache + reloads on next open — wire it to a cascade parent (e.g. the selected Region for a Country picker). |
| id? | string | — | |
| ariaLabel? | string | — | |
| disabled? | boolean | false | Disable the control (trigger inert, popover can't open). |
| placeholder? | string | "Select…" | |
| searchPlaceholder? | string | "Search…" | Placeholder for the filter input. |
| emptyText? | string | "No matches" | Shown when the query matches nothing. |
| loadingText? | string | "Loading…" | Shown in the dropdown while an async load is in flight. |
| errorText? | string | "Couldn't load — retry" | Shown in the dropdown when an async load fails (click to retry). |
| className? | string | — | Applied to the root (e.g. width in a flex row). |
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.