Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA searchable select that loads the next page of options when the list scrolls to its end, with a loading row, a total count and a screen-reader announcement for each page. Use this when a server list has more entries than one request returns.
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 server-side lists (customers, repositories, products) where the first page answers most searches and people occasionally scroll for more.
Do not use it when people need to reach the end quickly by keyboard. Prefer the Load more button pattern, which has a focusable control.
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 |
| --------------- | ------------------------------------------------------------ | ------- | ---------------------------------------------------- | --------------------------- |
| loadPage | (query, cursor) => Promise<{ items, nextCursor?, total? }> | - | Fetches one page. nextCursor absent means the end. |
| value | Item \\ | null | - | Selected item (controlled). |
| defaultValue | Item \\ | null | null | Initial item. |
| onValueChange | (item: Item) => void | - | Runs when an item is picked. |
| debounceMs | number | 250 | Wait after typing before searching. |
role="status" line announces Loaded N more, X of Y after each page.aria-hidden; the status line carries the meaning.The pattern ships with a Testing Library test (async-infinite-scroll-options.test.tsx) that covers the first page, loading the next page from the sentinel, the end of the list and resetting on a new search.