Inputs

Combobox

A typeahead search-and-select input built on Floating UI, supporting single selection or multi-select with removable chips.

Combobox

Preview

Fruit

Usage

tsx

import { Combobox } from "@vesture/react";

const fruitOptions = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "cherry", label: "Cherry" },
];

function Example() {
  const [fruit, setFruit] = useState(null);
  return (
    <Combobox
      aria-label="Fruit"
      options={fruitOptions}
      value={fruit}
      onChange={setFruit}
      placeholder="Search fruit…"
    />
  );
}

Behavior

Full WAI-ARIA combobox pattern: role="combobox" on the input, role="listbox"/"option" on the popover, aria-activedescendant tracks the highlighted option.
ArrowUp/ArrowDown move the highlighted option (skipping disabled ones), Enter selects it, Escape reverts the typed text and closes.
multiple renders selected options as removable chips; Backspace on an empty query removes the last chip.
Filters options client-side by default (case-insensitive substring); pass filterOptions and onInputChange to drive filtering from a server instead.

Props

Prop	Type	Default	Description
options	ComboboxOption[]	—	Required. { value, label, disabled? } list.
multiple	boolean	false	Enables chip-based multi-select; value becomes string[].
value / defaultValue / onChange	string \| string[] \| null	—	Controlled / uncontrolled selection.
onInputChange	(text: string) => void	—	Fires as the user types — pair with filterOptions for async/server-side filtering.
filterOptions	(options, inputText) => ComboboxOption[]	—	Overrides the default substring filter.
loading	boolean	—	Shows a loading row in the popover instead of options.
noOptionsMessage	string	"No options"	Shown when filtering matches nothing.
invalid / disabled	boolean	—	Same contract as Input.