AutocompleteMultiple

The autocompleteMultiple is a text input enhanced by a list of suggested options. This component is useful when the user has to choosemultiple options from a predefined list.

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

The input may contain only one option. Please refer to the Autocomplete component
The input must be an address. Please refer to the AutocompletePlace component

View source code

Import

AutocompleteMultiple: The autocomplete multiple component
AutocompleteNoOptions: A helper component designed for cases where no result 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 [selectedOptions, setSelectedOptions] = useState<Option[]>([]);

  return (
    <AutocompleteMultiple
      options={options}
      values={selectedOptions}
      translations={{
        selectAll: `Select all (${options.length} cost centers)`,
        selected: `${selectedOptions.length} cost centers selected`,
      }}
      onSearch={(value) => {
        if (!value) {
          setOptions(unfilteredOptions);
          return;
        }
        setOptions(
          unfilteredOptions.filter((option) =>
            option.label.toLowerCase().includes(value.toLowerCase())
          )
        );
      }}
      onSelect={setSelectedOptions}
      placeholder="Search a cost center"
    />
  );
};

Display selected options

Use the prop translations in order to customize the display inside the input. When the selected options need to be displayed, we recommend using Intl.ListFormat.

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 formatter = new Intl.ListFormat(navigator.locale, {
  style: "long",
  type: "conjunction",
});

const Demo = () => {
  const [options, setOptions] = useState(unfilteredOptions);
  const [selectedOptions, setSelectedOptions] = useState<Option[]>([]);

  return (
    <AutocompleteMultiple
      options={options}
      values={selectedOptions}
      fit="parent"
      translations={{
        selectAll: `Select all (${options.length} cost centers)`,
        selected: formatter.format(
          selectedOptions.map((option) => option.label)
        ),
      }}
      onSearch={(value) => {
        if (!value) {
          setOptions(unfilteredOptions);
          return;
        }
        setOptions(
          unfilteredOptions.filter((option) =>
            option.label.toLowerCase().includes(value.toLowerCase())
          )
        );
      }}
      onSelect={setSelectedOptions}
      placeholder="Search a cost center"
    />
  );
};