Autocomplete

A searchable select list. Type to filter options, navigate with arrow keys, and confirm with Enter.

Filtering uses smart case matching by default — all-lowercase queries are case-insensitive, but if any uppercase character is present the search becomes case-sensitive. Provide a custom filter function to override this behavior.

The value prop represents the selected option, not the search query. The search query is managed internally and resets the highlight index whenever it changes.

Basic Usage

import { Autocomplete } from 'giggles/ui';
import { useState } from 'react';

const countries = [
  { label: 'Argentina', value: 'ar' },
  { label: 'Brazil', value: 'br' },
  { label: 'Canada', value: 'ca' },
];

function CountryPicker() {
  const [country, setCountry] = useState('ar');

  return (
    <Autocomplete
      label="Country:"
      placeholder="Search..."
      options={countries}
      value={country}
      onChange={setCountry}
    />
  );
}

Terminal

Option values must be unique. Duplicate values will throw a GigglesError. Use primitive types (strings, numbers) for option values — object references are compared with ===.

Key	Action
Characters	Type to filter options
`↑` / `↓`	Highlight previous/next option
`←` / `→`	Move cursor in search input
`Home` / `End`	Jump to start/end of search input
`Backspace`	Delete character before cursor
`Delete`	Delete character at cursor
`Enter`	Confirm highlighted option
`Tab` / `Shift+Tab`	Move to next/previous component
`Escape`	Available for parent keybindings

<Autocomplete
  options={items}
  value={selected}
  onChange={setSelected}
  filter={(query, option) =>
    option.label.startsWith(query)
  }
/>

Custom render

Custom Render

<Autocomplete
  options={options}
  value={selected}
  onChange={setSelected}
  render={({ option, highlighted, selected }) => (
    <Text color={highlighted ? 'cyan' : 'white'} bold={selected}>
      {highlighted ? '→' : ' '} {option.label}
    </Text>
  )}
/>

Autocomplete

API Reference

Autocomplete

Keybindings

AutocompleteRenderProps

Examples

Custom filter

Custom render

On this page