A fully-featured autocomplete/combobox React component supporting single and multi-select modes, keyboard navigation, tag overflow, creatable options, and server-side filtering. ## Key Components ### Types & Interfaces | Export | Description | |---|---| | `AutocompleteOption` | Shape of a selectable option: `{ label, value }` | | `AutocompleteInputChangeReason` | `'input' \| 'reset' \| 'clear'` — reason passed to `onInputChange` | | `AutocompleteSingleProps` | Props for single-select mode | | `AutocompleteMultipleProps` | Props for multi-select mode (adds `maxItems`, `renderTag`, `limitTags`, `getLimitTagsText`) | | `AutocompleteProps` | Union of single and multiple prop types | ### Core Behaviors - **Single mode** — selects one value; input shows selected label when closed, clears on open (configurable via `clearOnOpen`) - **Multi mode** — toggles values in an array; renders selected items as tags with auto-limiting overflow (`limitTags: number | "auto"`) - **Creatable** — shows a `+ Create` option when no results match; blocked by `maxCreateLength` - **Server-side filtering** — set `disableClientFilter: true` and drive options via `onInputChange` - **Controlled input** — pass `inputValue` to fully control the text field - **Keyboard navigation** — arrow keys, Enter, and Escape supported via `highlightedIndex` state ### Internal Hooks & Utilities - `useAutoLimitTags` — calculates how many tags fit the container width - `useImperativeHandle` — exposes the container `div` ref to parent via `forwardRef` ## Usage Example ```typescript // Single select // Multi-select with tag limit and creatable options saveToServer(label)} maxCreateLength={50} /> // Server-side filtering fetchOptions(value)} loading={isFetching} /> ``` ## Source [`autocomplete.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/autocomplete.tsx)