Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA standalone virtualised listbox that is one tab stop and supports Arrow, Home, End, Page Up and Page Down, type-ahead over the whole list and a live position announcement. Use this when a long list is shown in full, not in a popup.
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.
Use it for long lists in sidebars and panes (countries, files, log levels), where only part of the list is in the DOM but the keyboard must reach every row as if it were all there.
Do not use it when the list is short or in a popup with a search box. Use a combobox.
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.
| Prop | Type | Default | Description |
| --------------- | ------------------------- | ------- | --------------------------------------------- | ---------------------------- |
| options | { value, label }[] | - | Any number of options, normally sorted. |
| value | string \\ | null | - | Selected value (controlled). |
| defaultValue | string \\ | null | null | Initial value. |
| onValueChange | (value: string) => void | - | Runs when a row is selected. |
| rowHeight | number | 32 | Row height in pixels. |
| visibleRows | number | 8 | Rows in the viewport; also the Page key step. |
| label | string | - | Names the listbox. |
aria-activedescendant; rendered rows are options with aria-posinset and aria-setsize from the full list.aria-selected marks it.Row 4,102 of 10,000: Lima.The pattern ships with a Testing Library test (virtual-listbox-page-keys.test.tsx) that covers one tab stop, the movement keys, type-ahead over unrendered rows and selecting.