Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA searchable select over a paged server list that ends with a Load more option you can reach with the arrow keys, a Showing N of M count and a polite announcement per page. Use this when infinite scroll is too hard to operate or too easy to trigger by accident.
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 server lists where people should stay in control of how much loads: large option sets on slow connections, and anywhere keyboard and switch users must be able to ask for the next page.
Do not use it when lists are short enough for one request. Fetch once and filter locally.
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. |
| value | Item \\ | null | - | Selected item (controlled). |
| defaultValue | Item \\ | null | null | Initial item. |
| onValueChange | (item) => void | - | Runs when an item is picked. |
| pageSize | number | - | Used in the Load more label when the size of the next page is known. |
| debounceMs | number | 250 | Wait after typing. |
Load 20 more is an option at the end of the list; Enter on it loads the next page and moves the highlight to the first new row.Showing 20 of 134; a role="status" line announces each page.aria-disabled and reads Loading….The pattern ships with a Testing Library test (async-load-more-button.test.tsx) that covers the first page, the Load more option appending a page, the highlight moving to the first new row and the end of the list.