Multi Select Selected First

ProNew

A multi-select that lists the current selection first each time it opens but keeps the order still while open, so rows never jump under the pointer. Use this when people review and edit a long selection.

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.

noun

Guide and examples

When to use it

Use it in settings where someone returns to adjust a selection of a dozen out of hundreds, such as notification channels, columns and integrations.

Do not use it when the list is short enough to scan. Sorting adds nothing there.

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
`options`	`{ value, label }[]`	-	The items.
`value`	`string[]`	-	Selected values (controlled).
`defaultValue`	`string[]`	`[]`	Initial selection.
`onValueChange`	`(value: string[]) => void`	-	Runs on every change.
`noun`	`string`	`items`	Word used in labels.

Accessibility

The order is computed when the popover opens and kept until it closes, so a screen-reader or pointer user never loses their place when toggling.
Rows are options with aria-checked; the list is aria-multiselectable.
Groups are labelled Selected when opened and Everything else.
Searching filters both groups; the grouping does not change while searching.

Testing

The pattern ships with a Testing Library test (multi-select-selected-first.test.tsx) that covers the order on opening, the order staying stable while toggling and the new order on the next opening.

Guide and examples

When to use it

Use it in settings where someone returns to adjust a selection of a dozen out of hundreds, such as notification channels, columns and integrations.

Do not use it when the list is short enough to scan. Sorting adds nothing there.

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
`options`	`{ value, label }[]`	-	The items.
`value`	`string[]`	-	Selected values (controlled).
`defaultValue`	`string[]`	`[]`	Initial selection.
`onValueChange`	`(value: string[]) => void`	-	Runs on every change.
`noun`	`string`	`items`	Word used in labels.

Accessibility

The order is computed when the popover opens and kept until it closes, so a screen-reader or pointer user never loses their place when toggling.
Rows are options with aria-checked; the list is aria-multiselectable.
Groups are labelled Selected when opened and Everything else.
Searching filters both groups; the grouping does not change while searching.

Testing

The pattern ships with a Testing Library test (multi-select-selected-first.test.tsx) that covers the order on opening, the order staying stable while toggling and the new order on the next opening.