Select

Select is the picker for a closed set of values, and the control a filter row reaches for first.

Installation

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

Filesrc/vui/select.tsx

Import from@viliha/vui-react/select

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

select-demo.tsx

import { Select } from "@viliha/vui-react/select";

Exports

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

Prop	Type	Default
Select	component	—

Select props

Prop	Type	Default	What it does
value	string	—
onValueChange	(value: string) => void	—
options?	readonly SelectOption[]	—	Static options. Omit when using `source` (async). `readonly`, because this component only ever reads them.
source?	AsyncOptionSource	—	Async option source — loads on open (no search box; use `Combobox` for a searchable remote list). The set value's label resolves via one record.
resetKey?	string	—	Changing this invalidates the async cache + reloads on next open.
id?	string	—
ariaLabel?	string	—
placeholder?	string	"Select…"
loadingText?	string	"Loading…"
errorText?	string	"Couldn't load — retry"
className?	string	—	Applied to the root (e.g. width in a flex row).
staticId?	string	—	The id the static edition pairs this trigger with its list by. Rendered as `data-vui-menu` on the trigger, the same convention `Dropdown` uses, so one emitter pass handles both.

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.