Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA select that starts loading its options when the pointer reaches the button or keyboard focus lands on it, so the list is usually ready when it opens, with skeleton rows and Retry as the fallback. Use this when the options come from a slow endpoint.
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 dropdowns backed by a request of a second or more (cost centres, accounts, regions), where waiting after the click is the whole user experience.
Do not use it when the options are cheap or already loaded. Prefetching only adds requests.
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 |
| --------------- | ----------------------------------- | ---------- | ----------------------------------- | ---------------------------- | ------------------------ |
| loadOptions | () => Promise<{ value, label }[]> | - | Fetches the options once. |
| value | string \\ | null | - | Selected value (controlled). |
| defaultValue | string \\ | null | null | Initial value. |
| onValueChange | (value: string) => void | - | Runs when an option is picked. |
| prefetchOn | "hover" \\ | "focus" \\ | "both" | both | What starts the request. |
| maxAgeMs | number | 300000 | How long loaded options are reused. |
Loading options…; when they arrive the status reads N options.Could not load options and a Retry button; the next hover or focus also retries.maxAgeMs passes.The pattern ships with a Testing Library test (prefetch-on-intent-select.test.tsx) that covers loading on hover and on focus, opening to ready options, the loading state when opened early and retrying.