Autocomplete

The autocomplete is a normal text input enhanced by a panel of suggested options.

() => {
  const top100Films = [
    { label: 'The Shawshank Redemption', year: 1994, group: 'Movie' },
    { label: 'The Godfather', year: 1972, group: 'Movie' },
    { label: 'The Godfather: Part II', year: 1974, group: 'Movie' },
    { label: 'The Dark Knight', year: 2008, group: 'Movie' },
    { label: '12 Angry Men', year: 1957, group: 'Movie' },
    { label: "Schindler's List", year: 1993, group: 'Series' },
    { label: 'Pulp Fiction', year: 1994, group: 'Series' },
    {
      label: 'The Lord of the Rings: The Return of the King',
      year: 2003,
      group: 'Series',
    },
    { label: 'The Good, the Bad and the Ugly', year: 1966, group: 'Series' },
    { label: 'Fight Club', year: 1999, group: 'Series' },
    { label: 'End Game', year: 1999, group: '' },
  ];
  return (
    <Autocomplete
      disablePortal
      id="combo-box-demo1"
      options={top100Films}
      label="Entertainment"
    />
  );
};

Props

Prop	Type	Default	Description
options	Array		Array of options.
renderInput	() => void		Render the input.
defaultValue	boolean		If true, the Popper content will be under the DOM hierarchy of the parent component.
children	ReactNode		The content of the component.
classes	object		Override or extend the styles applied to the component.
groupBy	() => void		If provided, the options will be grouped under the returned string. The groupBy value is also used as the text for group headings when renderGroup is not provided.
renderGroup	() => void		Render the group.
renderOption	() => void		Render the option, use getOptionLabel by default.
renderTags	() => void		Render the selected value.
disabled	boolean		If true, the component is disabled.
disablePortal	boolean		If true, the Popper content will be under the DOM hierarchy of the parent component.
open	boolean		If true, the component is shown.
getOptionLabel	() => void	(option) => option.label ?? option	Used to determine the string value for a given option. It's used to fill the input (and the list box options if renderOption is not provided). If used in free solo mode, it must accept both the type of the options and a string.
getChipOptionLabel	() => void	(option) => option.label ?? option	Used to determine the string value for a given option. It's used to fill the input (and the list box options if renderOption is not provided). If used in free solo mode, it must accept both the type of the options and a string, for multiple options selected

The ref is forwarded to the root element.

Examples

Autocomplete with groupBy

() => {
  const top100Films = [
    { label: 'The Shawshank Redemption', year: 1994, group: 'Movie' },
    { label: 'The Godfather', year: 1972, group: 'Movie' },
    { label: 'The Godfather: Part II', year: 1974, group: 'Movie' },
    { label: 'The Dark Knight', year: 2008, group: 'Movie' },
    { label: '12 Angry Men', year: 1957, group: 'Movie' },
    { label: "Schindler's List", year: 1993, group: 'Series' },
    { label: 'Pulp Fiction', year: 1994, group: 'Series' },
    {
      label: 'The Lord of the Rings: The Return of the King',
      year: 2003,
      group: 'Series',
    },
    { label: 'The Good, the Bad and the Ugly', year: 1966, group: 'Series' },
    { label: 'Fight Club', year: 1999, group: 'Series' },
    { label: 'End Game', year: 1999, group: '' },
  ];
  return (
    <Autocomplete
      groupBy={(option) => option.group}
      disablePortal
      id="combo-box-demo2"
      options={top100Films}
      label="Entertainment"
    />
  );
};

Autocomplete with mutliple select options

() => {
  const top100Films = [
    { label: 'The Shawshank Redemption', year: 1994, group: 'Movie' },
    { label: 'The Godfather', year: 1972, group: 'Movie' },
    { label: 'The Godfather: Part II', year: 1974, group: 'Movie' },
    { label: 'The Dark Knight', year: 2008, group: 'Movie' },
    { label: '12 Angry Men', year: 1957, group: 'Movie' },
    { label: "Schindler's List", year: 1993, group: 'Series' },
    { label: 'Pulp Fiction', year: 1994, group: 'Series' },
    {
      label: 'The Lord of the Rings: The Return of the King',
      year: 2003,
      group: 'Series',
    },
    { label: 'The Good, the Bad and the Ugly', year: 1966, group: 'Series' },
    { label: 'Fight Club', year: 1999, group: 'Series' },
    { label: 'End Game', year: 1999, group: '' },
  ];
  return (
    <Autocomplete
      multiple
      disablePortal
      id="combo-box-demo3"
      options={top100Films}
      label="Entertainment"
    />
  );
};