InkUI
Components

Autocomplete

Text input with filtered dropdown suggestions and keyboard navigation.

Type to filter a list of options, navigate with arrow keys, and select with Enter.

Live Preview
Autocomplete · live filter
? Package name:
~/my-cli — node v22● running

Installation

npx inkui add autocomplete

Usage

import { Autocomplete } from './components/ui/autocomplete';
 
const packages = [
  { label: 'express', value: 'express', description: 'Web framework' },
  { label: 'react', value: 'react', description: 'UI library' },
  { label: 'typescript', value: 'typescript', description: 'TypeScript compiler' },
];
 
export default function App() {
  return (
    <Autocomplete
      items={packages}
      onSelect={(item) => console.log(item.value)}
      placeholder="Search packages..."
      label="Install:"
    />
  );
}

Keyboard Shortcuts

KeyAction
TypeFilter suggestions
/ Navigate suggestions
EnterSelect highlighted item
TabAutocomplete to highlighted
EscClear input / close

API Reference

PropTypeDefaultDescription
itemsAutocompleteItem[]Available options (required)
onSelect(item) => voidCalled on selection (required)
placeholderstring'Search...'Input placeholder
labelstringLabel before input
maxVisiblenumber5Max dropdown items
filter(query, item) => booleanCustom filter function
showDescriptionsbooleantrueShow item descriptions
emptyMessagestring'No matches'Message when no results
focusbooleantrueAccept keyboard input
themeInkUIThemedarkThemeColor theme

On this page