Autocomplete

Autocomplete is a typing-first single-select. Use it when the user already knows what they want and just needs help completing the value (recipient lookup, tag suggestion, search-as-you-type). For shorter, browse-first option sets, prefer Combobox or Select.

#Default usage

<Autocomplete
  options={[
    { value: "apple", label: "Apple" },
    { value: "banana", label: "Banana" },
    { value: "cherry", label: "Cherry" }
  ]}
  placeholder="Pick a fruit"
/>

#Import

import {
  Autocomplete,
  type AutocompleteOption,
} from "@froggdesign/enter-ui-react";

#Patterns

Pass disableLocalFilter and respond to onSearchChange or onInputValueChange from a debounced fetcher to plug an async data source. Re-render with the freshly loaded options.

const [results, setResults] = useState<AutocompleteOption[]>([]);
const [loading, setLoading] = useState(false);

<Autocomplete
  options={results}
  loading={loading}
  disableLocalFilter
  onSearchChange={(query) => {
    setLoading(true);
    debouncedSearch(query).then((data) => {
      setResults(data);
      setLoading(false);
    });
  }}
  onValueChange={(value, option) => onPick(option)}
/>

#Accessibility

Follows the WAI-ARIA combobox pattern with role="combobox" on the input and role="listbox" / role="option" for the popup. Highlighted option is referenced via aria-activedescendant. The empty and loading states use role="status" so they are announced. Keyboard: ArrowDown / ArrowUp move highlight, Enter picks, Escape closes.

#API

• options, value, defaultValue, onValueChange.
• inputValue, defaultInputValue, onInputValueChange, onSearchChange.
• allowCustomValue for committing free-typed values with Enter.
• loading, emptyText, loadingText, disableLocalFilter.
• invalid, disabled, placeholder, rootClassName.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.