[autocomplete] Support vim-style Ctrl+N/Ctrl+P keyboard navigation
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
# Feature request
## Summary
`Autocomplete` (and the underlying `Combobox`) supports arrow-key navigation through the list, but there is no way to navigate with Ctrl+N/Ctrl+P (vim-style bindings). This is a common expectation for command-palette and search UIs built on top of `Autocomplete`.
Proposed: an opt-in prop on `Autocomplete.Root` / `Combobox.Root`, e.g. `vimBindings?: boolean` (default `false`), that maps Ctrl+N/Ctrl+J to "highlight next" and Ctrl+P/Ctrl+K to "highlight previous".
## Examples in other libraries
- [cmdk](https://github.com/pacocoursey/cmdk) supports this out of the box via a `vimBindings` prop (defaults to `true`). It maps Ctrl+N/Ctrl+J to down and Ctrl+P/Ctrl+K to up: see [`cmdk/src/index.tsx`](https://github.com/pacocoursey/cmdk/blob/main/cmdk/src/index.tsx).
## Motivation
`Autocomplete` can be used to build command palettes and search inputs (the docs ship a Command Palette example). Some users navigate results with Ctrl+N/Ctrl+P instead of the arrow keys. Projects migrating from cmdk, which supports this, currently have no way to add it back.
Tested with `@base-ui-components/react@1.6.0`.
Contributor guide
Assessment
This issue has not been assessed yet.