@zedtech/zedkit-ui

Combobox

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

beta@zedtech/zedkit-ui

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

Type to filter the list.

View props table

Who is it for?: Form builders with long lists where typing to filter beats scrolling a select.
When should I use it?: When users know part of the label (city, SKU, assignee).
When should I pick something else?: For a fixed short list with no search — use Select.

Use it

Simple

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" />;

Kit not installed yet?

This ships on npm only; there is no copy-source brick for it.

You get

Every component from one import, with the theme tokens included. Updates arrive with your package manager.

You need

React 19 and Tailwind CSS 4, for example a Next.js app created with the Tailwind option.

Install

Terminal

pnpm add @zedtech/zedkit-ui @fontsource-variable/inter @fontsource-variable/space-grotesk

Load the styles

Tailwind does not scan node_modules, so the @source line points it at the kit's class names. The path is relative to this file.

src/app/globals.cssReplace the contents

@import "tailwindcss";
@import "@zedtech/zedkit-ui/styles.css";
@source "../../node_modules/@zedtech/zedkit-ui/src/**/*.{ts,tsx}";
@source not "../../node_modules/@zedtech/zedkit-ui/src/**/*.test.*";

Pick a look

Set data-identity="glass" on <html> so the finished app matches the site. Fresh app: replace src/app/layout.tsx. Existing app: merge, and keep ThemeProvider and other providers.

src/app/layout.tsxReplace the contents

import "./globals.css";
import "./fonts";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-identity="glass">
      <body>{children}</body>
    </html>
  );
}

4
Load the fonts
The Glass look uses Inter and Space Grotesk; these imports self-host them.
src/app/fonts.tsCreate the file
```
import "@fontsource-variable/inter";
import "@fontsource-variable/space-grotesk";
```

Import and render

Simple

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" />;

Package version 2.0.1.

Props

Prop

Type

Accessibility

Text input with listbox popup; arrow keys highlight, Enter selects, Escape closes.

Troubleshooting

Menu stays empty — check `options` labels match the typed filter. Selection does not stick — control `value` and `onValueChange` together.

Select

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

MultiSelect

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