Autocomplete

The autocomplete is a text input enhanced by a list of suggested options. This component is useful when the user has to choose a single option from a predefined list.

This component shouldn't be used in the following scenarios:

The input may contain multiple options. Please refer to the AutocompleteMultiple component
The input must be an address. Please refer to the AutocompletePlace component

View source code

Import

Autocomplete: The autocomplete component
AutocompleteNoOptions: A helper component designed for cases where no results are found.
DropdownItem: A helper component designed to represent a complex item inside a list.

Basic usage

const unfilteredOptions = [
  { key: "1", label: "Marketing" },
  { key: "2", label: "Legal" },
  { key: "3", label: "Office" },
  { key: "4", label: "Platform" },
  { key: "5", label: "Finance" },
  { key: "6", label: "Recruitment" },
  { key: "7", label: "Growth" },
  { key: "8", label: "Management" },
];
type Option = (typeof unfilteredOptions)[number];

const Demo = () => {
  const [options, setOptions] = useState(unfilteredOptions);
  const [selectedOption, setSelectedOption] = useState<Option>();
  return (
    <Autocomplete
      options={options}
      value={selectedOption}
      renderNoOptions={(rawValue) => (
        <AutocompleteNoOptions>
          There are no results for {rawValue}
        </AutocompleteNoOptions>
      )}
      onSearch={(value) => {
        if (!value) {
          setOptions(unfilteredOptions);
          return;
        }
        setOptions(
          unfilteredOptions.filter((option) =>
            option.label.toLowerCase().includes(value.toLowerCase())
          )
        );
      }}
      onSelect={setSelectedOption}
      placeholder="Search a cost center"
    />
  );
};

Variant

Use the inputVariant prop to control the visual style of the Autocomplete. The Autocomplete comes with two visual styles: default (default) and magicGradient.

<Autocomplete inputVariant="magicGradient" {...otherProps} />

Size

Use the fit prop to control the size of the Autocomplete.

<Autocomplete fit="parent" {...otherProps} />

Placement

Use the placement prop to move the list of suggested options above or below the Autocomplete.

<Autocomplete placement="top-start" {...otherProps} />

Clear Button

Use the showClearSelectionButton prop to display a button at the end of the field to clear the input.

<Autocomplete showClearSelectionButton {...otherProps} />

Create unknown option

The Autocomplete component lets the user create a new option when no options match his search. Use the onAddOption and renderAddOption to add this behavior.

<Autocomplete
  renderAddOption={(inputValue) => {
    return <DropdownItem label={<span>Create {inputValue}</span>} />;
  }}
  onAddOption={handleAddOption}
  {...otherProps}
/>

Customization

Customized option

Use the renderOption prop to customize how options are rendered.

<Autocomplete
  renderOption={(option, state) => (
    <DropdownItem
      {...state}
      label={option.label}
      prefix={<Avatar size={24} text={option.label} variant="square" />}
    />
  )}
  {...otherProps}
/>

Customized input

Use the renderPrefix prop to customize the input.

<Autocomplete
  renderPrefix={() => <Avatar size={24} text="Supplier" variant="square" />}
  {...otherProps}
/>