Virtual Multi Select Large List

ProNew

A multi-select over ten thousand options that renders only the rows in view, keeps focus in the search box, moves with the arrow and Page keys, toggles with Enter and offers Select all matching and Clear with a live count. Use this when a long list needs several picks.

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.

rowHeight32

visibleRows8

aria-label

Guide and examples

When to use it

Use it for choosing customers, SKUs, cities or IDs from tens of thousands, where a plain list would freeze the page and people need to pick many.

Do not use it when the list is a few hundred items. Use a plain multi-select, which is simpler.

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 }[]`	-	Any number of options.
`value`	`string[]`	-	Selected values (controlled).
`defaultValue`	`string[]`	`[]`	Initial selection.
`onValueChange`	`(value: string[]) => void`	-	Runs on every change.
`rowHeight`	`number`	`32`	Row height in pixels.
`visibleRows`	`number`	`8`	Rows in the viewport.
`aria-label`	`string`	`Items`	Names the control.

Accessibility

The search box is a combobox controlling a listbox with aria-multiselectable; rows are options with aria-checked, aria-posinset and aria-setsize.
The highlighted row follows the arrow and Page keys, scrolls into view and is exposed through aria-activedescendant, so screen readers announce 4,102 of 10,000.
Select all matching affects only the rows that match the search and says how many; Clear removes every selection.
4 matches, 2 selected is announced politely as the filter changes.

Testing

The pattern ships with a Testing Library test (virtual-multi-select-large-list.test.tsx) that covers rendering a window of rows, keyboard toggling, Page keys, select all matching and the count.

Guide and examples

When to use it

Use it for choosing customers, SKUs, cities or IDs from tens of thousands, where a plain list would freeze the page and people need to pick many.

Do not use it when the list is a few hundred items. Use a plain multi-select, which is simpler.

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 }[]`	-	Any number of options.
`value`	`string[]`	-	Selected values (controlled).
`defaultValue`	`string[]`	`[]`	Initial selection.
`onValueChange`	`(value: string[]) => void`	-	Runs on every change.
`rowHeight`	`number`	`32`	Row height in pixels.
`visibleRows`	`number`	`8`	Rows in the viewport.
`aria-label`	`string`	`Items`	Names the control.

Accessibility

The search box is a combobox controlling a listbox with aria-multiselectable; rows are options with aria-checked, aria-posinset and aria-setsize.
The highlighted row follows the arrow and Page keys, scrolls into view and is exposed through aria-activedescendant, so screen readers announce 4,102 of 10,000.
Select all matching affects only the rows that match the search and says how many; Clear removes every selection.
4 matches, 2 selected is announced politely as the filter changes.

Testing

The pattern ships with a Testing Library test (virtual-multi-select-large-list.test.tsx) that covers rendering a window of rows, keyboard toggling, Page keys, select all matching and the count.