Searchable dropdowns need to handle keystroke filtering, keyboard navigation (arrows to move focus, Enter to select), dropdown positioning, click-outside dismissal, and ARIA attributes at once. Rebuilding this for each form means duplicating layout logic, accessibility bugs, and losing mutation hooks that agents need to drive the interaction.

Autocomplete is a controlled input (value + onChange) paired with a portal dropdown that filters an array of options objects (each with value, label, and optional disabled flag). It emits onSearch on each keystroke so consumers can wire server-side search. Keyboard navigation (arrow keys + Enter) and click-outside/Escape handling are built in. The wrapper has data-react-fancy-autocomplete for stable agent selection.

Import from @particle-academy/react-fancy, pass value, onChange, a plain array of {value: string; label: string; disabled?: boolean} to options, and optionally onSearch to listen for filter queries. The input handles focus, escape, click-outside, and all keyboard nav automatically.