A searchable combobox that debounces input, shows shimmering skeleton rows while results load and drops stale responses. Matches are underlined, rows stagger in and the footer reports the result count and how long the search took.
From SFO · Fri, Dec 12 · 1 adult
npx shadcn@latest add https://hyperblur.dev/r/select-combobox-async.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/select-combobox-async.tsx.
import { SelectComboboxAsync } from "@/components/hyperblur/select-combobox-async"
<SelectComboboxAsync loadOptions={(q, signal) => fetch(`/api/places?q=${q}`, { signal }).then((r) => r.json())} />| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Flying to" | Label above the field. Pass an empty string to hide it. |
| placeholder | string | "City, airport or code" | Placeholder of the input. |
| options | SelectComboboxAsyncOption[] | 18 airports | Local data searched with a simulated delay when loadOptions is not given. Each option has id, label, description, badge and meta. |
| loadOptions | (query: string, signal: AbortSignal) => Promise<SelectComboboxAsyncOption[]> | Your own search. The signal aborts when the query changes. | |
| latency | number | 420 | Simulated delay in milliseconds for the built-in search. |
| debounce | number | 160 | Wait after the last keystroke before searching, in milliseconds. |
| maxResults | number | 6 | Most rows to show. |
| recent | SelectComboboxAsyncOption[] | first three options | Rows shown under Recent while the input is empty. |
| value | SelectComboboxAsyncOption | null | Controlled selection. Pair with onChange. | |
| defaultValue | SelectComboboxAsyncOption | null | null | Initial selection when uncontrolled. |
| onChange | (option: SelectComboboxAsyncOption | null) => void | Called when an option is chosen or the field is cleared. | |
| defaultQuery | string | "" | Text in the input on first render. |
| defaultOpen | boolean | false | Open the list on first render. |
| embedded | boolean | false | Render the list in the page flow instead of floating, for previews and inline layouts. |
| accent | string | "#2f7bff" | Focus ring, spinner and highlight color. |