Cascading Combobox

Cascading Combobox is a pair of pickers where the second only loads once the first has an answer.

Installation

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

Filesrc/vui/cascading-combobox.tsx
Import from@viliha/vui-react/cascading-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

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

Exports

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

PropTypeDefault
CascadingComboboxcomponent—

CascadingCombobox props

PropTypeDefaultWhat it does
levelsCascadeLevel[]—Ordered, named levels — one searchable Combobox is rendered per level.
itemsCascadeNode[]—Hierarchical data: root nodes = level 0; a node's `children` = the next level.
valuestring[]—Selected path, one value per level (a shorter array = deeper levels unset).
onValueChange(value: string[], nodes: CascadeNode[]) => void—Fires with the new path and the resolved node at each step of it.
orientation?"vertical" | "horizontal""vertical"Stack the levels (default) or lay them out in a row.
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.