zedkit
@zedtech/zedkit-ui

Search and pick one option

Searchable single-select combobox with popover list, empty and loading rows, keyboard navigation.

alpha

At a glance

  • Who: Form builders with long lists where typing to filter beats scrolling a select.
  • What: Searchable single-select combobox with popover list, empty and loading rows, keyboard navigation.
  • Use when: When users know part of the label (city, SKU, assignee).
  • Avoid when: For a fixed short list with no search — use Select.
  • See also: Pick one option from a dropdown, Pick many searchable options

Preview

@zedtech/zedkit-ui — Combobox, ComboboxOption, ComboboxProps

Preview

Type to filter the list.

View props table

Install

pnpm add @zedtech/zedkit-ui

Latest: 0.6.4 (via changesets).

Example

Usage
import { Combobox, type ComboboxOption } from "@zedtech/zedkit-ui";
const options: ComboboxOption[] = [{ value: "eu", label: "Europe" }];
<Combobox options={options} value={region} onValueChange={setRegion} aria-label="Region" />;

Wraps: downshift, @radix-ui/react-popover

Props

Prop

Type

Pick one option from a dropdown

Accessible dropdown select with trigger, value and items; empty lists render a disabled message item.

Pick many searchable options

Searchable multi-select with removable chips, shared empty/loading states, keyboard support.

On this page

At a glancePreviewInstallExampleProps