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
isMultiVariant	boolean	false	If true, the Autocomplete component with 'Select All' and 'Clear Selections' options will be displayed.
labelId	string	label	Optional. Defines the key in the option object to be used as the display label. If not provided, it defaults to 'label'. And it is going to be used with only 'isMultiVariant'

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"
    />
  );
};

Autocomplete with Multi select variant

() => {

 const options = [
  { id: 1, title: "Ten" },
  { id: 2, title: "Twenty" },
  { id: 3, title: "Thirty" },
  { id: 4, title: "Forty" },
  { id: 5, title: "Fifty" },
  { id: 6, title: "Sixty" },
  { id: 7, title: "Seventy" },
  { id: 8, title: "Eighty" },
  { id: 9, title: "Ninety" },
  { id: 10, title: "One Hundred" },
  { id: 11, title: "One Hundred Ten" },
  { id: 12, title: "One Hundred Twenty" },
  { id: 13, title: "One Hundred Thirty" },
  { id: 14, title: "One Hundred Forty" },
  { id: 15, title: "One Hundred Fifty" },
  { id: 16, title: "One Hundred Sixty" },
  { id: 17, title: "One Hundred Seventy" },
  { id: 18, title: "One Hundred Eighty" },
  { id: 19, title: "One Hundred Ninety" },
  { id: 20, title: "Two Hundred" },
  { id: 21, title: "Two Hundred Ten" },
  { id: 22, title: "Two Hundred Twenty" },
  { id: 23, title: "Two Hundred Thirty" },
  { id: 24, title: "Two Hundred Forty" },
  { id: 25, title: "Two Hundred Fifty" },
  { id: 26, title: "Two Hundred Sixty" },
  { id: 27, title: "Two Hundred Seventy" },
  { id: 28, title: "Two Hundred Eighty" },
  { id: 29, title: "Two Hundred Ninety" },
  { id: 30, title: "Three Hundred" },
  { id: 31, title: "Three Hundred Ten" },
  { id: 32, title: "Three Hundred Twenty" },
  { id: 33, title: "Three Hundred Thirty" },
  { id: 34, title: "Three Hundred Forty" },
  { id: 35, title: "Three Hundred Fifty" },
  { id: 36, title: "Three Hundred Sixty" },
  { id: 37, title: "Three Hundred Seventy" },
  { id: 38, title: "Three Hundred Eighty" },
  { id: 39, title: "Three Hundred Ninety" },
  { id: 40, title: "Four Hundred" },
];

  const [value, setValue] = React.useState([]);
  const [inputValue, setInputValue] = React.useState();

  return (
    <Autocomplete
      value={value}
      setValue={setValue}
      options={options}
      label="Demo"
      inputValue={inputValue}
      onInputChange={ (e, value) => setInputValue(value)}
      isMultiVariant
      labelId='title'
    />
  );

};