FeaturedNew
Search BarsHero Search with Suggestions
A large hero search field with a live combobox suggestion list driven by the keyboard.
#search#combobox#autocomplete
3 frameworksIntermediate
Loading…
A search field that debounces input, shows an in-field spinner, then reveals filtered results.
<div class="mx-auto w-full max-w-md">
<div class="relative">
<label class="sr-only" for="async-search">Search</label>
<input id="async-search" type="search" placeholder="Search…" autocomplete="off" aria-busy="true" class="w-full rounded-lg border border-gray-300 bg-white py-2 pl-3 pr-10 text-sm text-gray-900 placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus-visible:ring-blue-400" />
<!-- Spinner sits inside the field while the (simulated) request is in flight. -->
<svg class="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin text-blue-600 motion-reduce:animate-none dark:text-blue-400" viewBox="0 0 20 20" fill="none" aria-hidden="true">
<circle cx="10" cy="10" r="7" stroke="currentColor" stroke-width="3" class="opacity-25" />
<path d="M17 10a7 7 0 0 0-7-7" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
</svg>
</div>
<p class="mt-3 text-xs text-gray-600 dark:text-gray-300" role="status" aria-live="polite">Searching…</p>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | AsyncItem[] | - | The array of items to render. |
delay | number | 350 | Seconds to wait before animating in. |
placeholder | string | 'Search…' | Placeholder |
className | string | - | Additional classes merged onto the root element. |
A timer stands in for network latency - no request is made - so the loading, empty and result states are all real; the effect cleanup cancels a stale query when you keep typing. `aria-busy` and an `aria-live` status announce the searching and count states. Tune the wait with `delay`.