Components

Combobox

Search and pick one or several items of any shape, composed from parts: field, panel, search, a virtualized list, empty and create rows.

Everyday checking

Import

import { Combobox, ComboboxTrigger, ComboboxSearch, ComboboxList, ComboboxItem, ComboboxEmpty, ComboboxCreate } from '@rinzai/zen';

Examples

Many items

2,000 items: the list renders only the rows in view, so it opens and scrolls instantly. Type to filter.

Account 0001

API reference

<Combobox>

Pick one or several items from a list you can search: a field that opens a panel with a search box and the matching items. Compose it from ComboboxTrigger, ComboboxPopup, ComboboxSearch, ComboboxList (virtualized, for long lists), ComboboxItem, ComboboxEmpty and ComboboxCreate. Keyboard: Enter, Space or ↓ on the field opens it, typing searches, ↑↓ move, Enter chooses, Escape closes. Items can be any shape: say how to read a key and text from one with itemKey and itemText.

Prop	Type	Default
`items`Required	`readonly T[]`	`—`
`onValueChange`Required	`((key: string) => void) \| ((keys: string[]) => void)`	`—`
`value`Required	`string \| readonly string[] \| null`	`—`
`filter` Whether an item matches the search (default: its text contains it, any case).	`((item: T, query: string) => boolean)`	`—`
`itemKey` How to read an item's unique key (default: its `key`).	`((item: T) => string)`	`—`
`itemText` How to read an item's text, shown and searched (default: its `text`).	`((item: T) => string)`	`—`
`multiple`	`boolean`	`—`
`selectedItems` Chosen items that aren't in `items` (e.g. just created), so the field can still show them.	`readonly T[]`	`—`

<ComboboxTrigger>

The field: shows the choice (text, or chips when multiple) or the placeholder, and opens the panel. Pass children to show the value your own way.

Prop	Type	Default
`children` Your own display of the value (default: its text, or chips).	`ReactNode`	`—`
`disabled`	`boolean`	`—`
`placeholder` Shown while nothing is chosen.	`string`	`Select an Item`

<ComboboxSearch>

The search box: focused when the panel opens; ↑↓ move through the matches and Enter chooses.

Prop	Type	Default
`aria-label`	`string`	`Search options`
`placeholder`	`string`	`Search`

<ComboboxList>

The matching items, rendered only while in view (so thousands stay fast). Rows are itemHeight px tall; renderItem draws each (default: a ComboboxItem). Put ComboboxEmpty or ComboboxCreate inside for no matches.

Prop	Type	Default
`itemHeight` Height of every row, in px (default 35).	`number`	`35`
`renderItem`	`((item: T) => ReactNode)`	`—`

<ComboboxItem>

One item in a ComboboxList: a check when chosen, then its text (or your own content).

Prop	Type	Default
`item`Required	`T`	`—`
`className`	`string`	`—`

<ComboboxEmpty>

Shown when the search matches nothing.

No props of its own; it accepts the props of the element it renders.

<ComboboxCreate>

Offered when the search matches nothing: adds what was typed (Enter works too). children renders the row from the text (default "Add …").

Prop	Type	Default
`onCreate`Required	`(text: string) => void`	`—`