Expandable Search
Pro
A search button that springs open into a field with live, keyboard-friendly suggestions.
Halden Docs
Click the search icon, or tab to it and press Enter.
Customize
300px
Suggestions
Installation
Expandable Search is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy expandable-search.tsx into components/ui and run npm install motion.
Usage
import { ExpandableSearch } from "@/components/ui/expandable-search";
<ExpandableSearch
placeholder="Search docs…"
suggestions={["Getting started", "Webhooks", "Rate limits"]}
onSearch={(q) => router.push(`/search?q=${encodeURIComponent(q)}`)}
/>Props
7 properties| Property | Type | Default | Description |
|---|---|---|---|
| placeholder | string | "Search…" | Placeholder, also the field's accessible name. |
| suggestions | string[] | [] | Filtered as the user types; shown as a list when the field is empty. |
| onSearch | (query: string) => void | — | Called on Enter, on the search icon, or when a suggestion is chosen. |
| width | number | 280 | Expanded width in pixels. |
| defaultExpanded | boolean | false | Start expanded. |
| maxSuggestions | number | 5 | Most suggestions shown at once. |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion