Combobox
A type-ahead autocomplete with staggered result reveal, highlighted matches, keyboard navigation, and an async loading state.
Assignee
Search teammates by name
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/combobox.json"Usage
tsx
import { Combobox } from "@/components/godui/combobox";tsx
const [value, setValue] = useState("");
<Combobox options={options} value={value} onChange={setValue} />;Examples
Async search
Pass onSearch to resolve options for a query — it debounces input and shows a
loading state while results arrive.
Framework
Results resolve from an async source with a loading state.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
options | ComboboxOption[] | — | Static options ({ label, value, description? }) |
onSearch | (query) => Promise<ComboboxOption[]> | — | Async resolver (overrides options) |
value | string | — | Controlled selected value |
defaultValue | string | "" | Uncontrolled initial value |
placeholder | string | "Search…" | Input placeholder |
emptyMessage | string | "No results" | Shown when nothing matches |
onChange | (value, option) => void | — | Called on selection |
Breadcrumbs
A breadcrumb trail with a shared-element hover pill that springs between crumbs, animated path changes, and an overflow that collapses into a popover.
Context Menu
A right-click menu that springs open from the exact cursor point and flips to stay inside the viewport, with icons, shortcuts, and destructive actions.