Combobox
InputsEditable input + filtered listbox. Client-side "contains"/"startsWith" filtering or bring-your-own (filter={false} for server-driven lists).
import { Combobox } from "@componentforge/react";
Examples
Client-filtered listbox
value: (empty)Accessibility
- Input carries aria-autocomplete="list", aria-expanded, aria-controls and aria-activedescendant.
- Listbox keeps DOM focus on the input; mousedown on options is prevented so focus never blurs mid-interaction.
- Empty result state renders an announced message region.
Keyboard interactions
| Key | Action |
|---|---|
| ↓ / ↑ | Open, then move active option (skips disabled). |
| Enter | Select active option. |
| Escape | Close the popup. |
API reference
Selected props — every component also spreads native HTML attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| filter | "contains" | "startsWith" | false | "contains" | Client predicate; false disables filtering for async sources. |
| value / defaultValue / onValueChange | string | "" | Selection contract. |
| emptyMessage | string | "No results found" | Shown when the filtered list is empty. |