Async Multi Select Retained

ProNew

A multi-select over a server search that keeps the chosen items as chips across searches, marks results that are already chosen and never loses a selection when the results change. Use this when people pick several items they find one search at a time.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

max1

debounceMs250

Guide and examples

When to use it

Use it for adding several users, tags or products from a large server catalogue, where each pick comes from a different search and the earlier ones must stay put.

Do not use it when the options are all loaded. Use a local multi-select.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`search`	`(query, { signal }) => Promise<Item[]>`	-	Searches the server.
`value`	`Item[]`	-	Chosen items, as objects (controlled).
`defaultValue`	`Item[]`	`[]`	Initial items.
`onValueChange`	`(items: Item[]) => void`	-	Runs on every change.
`max`	`number`	-	Most items.
`debounceMs`	`number`	`250`	Wait after typing.

Accessibility

Chosen items are stored as whole objects, so their chips and labels do not depend on the current results.
The result list marks chosen items with aria-checked and a check; toggling an item removes it from the chips.
Backspace on an empty search removes the last chip and says so in a polite status.
max disables unchosen results once reached and says Limit of N reached.

Testing

The pattern ships with a Testing Library test (async-multi-select-retained.test.tsx) that covers keeping chips across searches, toggling from results, Backspace removal and the limit.

Guide and examples

When to use it

Use it for adding several users, tags or products from a large server catalogue, where each pick comes from a different search and the earlier ones must stay put.

Do not use it when the options are all loaded. Use a local multi-select.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`search`	`(query, { signal }) => Promise<Item[]>`	-	Searches the server.
`value`	`Item[]`	-	Chosen items, as objects (controlled).
`defaultValue`	`Item[]`	`[]`	Initial items.
`onValueChange`	`(items: Item[]) => void`	-	Runs on every change.
`max`	`number`	-	Most items.
`debounceMs`	`number`	`250`	Wait after typing.

Accessibility

Chosen items are stored as whole objects, so their chips and labels do not depend on the current results.
The result list marks chosen items with aria-checked and a check; toggling an item removes it from the chips.
Backspace on an empty search removes the last chip and says so in a polite status.
max disables unchosen results once reached and says Limit of N reached.

Testing

The pattern ships with a Testing Library test (async-multi-select-retained.test.tsx) that covers keeping chips across searches, toggling from results, Backspace removal and the limit.