Autocomplete
The autocomplete is a normal text input enhanced by a panel of suggested options.
The widget is useful for setting the value of a single-line textbox in one of two types of scenarios:
- The value for the textbox must be chosen from a predefined set of allowed values, for example a location field must contain a valid location name: combo box.
- The textbox may contain any arbitrary value, but it is advantageous to suggest possible values to the user, for example a search field may suggest similar or previous searches to save the user time: free solo.
It's meant to be an improved version of the "react-select" and "downshift" packages.
Combo box
The value must be chosen from a predefined set of allowed values.
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import top100Films from './top100Films';
export default function ComboBox() {
return (
<Autocomplete
disablePortal
options={top100Films}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Movie" />}
/>
);
}
Options structure
By default, the component accepts the following options structures:
interface AutocompleteOption {
label: string;
}
// or
type AutocompleteOption = string;
for instance:
const options = [
{ label: 'The Godfather', id: 1 },
{ label: 'Pulp Fiction', id: 2 },
];
// or
const options = ['The Godfather', 'Pulp Fiction'];
However, you can use different structures by providing a getOptionLabel prop.
If your options are objects, you must provide the isOptionEqualToValue prop to ensure correct selection and highlighting. By default, it uses strict equality to compare options with the current value.
Playground
Each of the following examples demonstrates one feature of the Autocomplete component.
import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import Stack from '@mui/material/Stack';
export default function Playground() {
const defaultProps = {
options: top100Films,
getOptionLabel: (option: FilmOptionType) => option.title,
};
const flatProps = {
options: top100Films.map((option) => option.title),
};
const [value, setValue] = React.useState<FilmOptionType | null>(null);
return (
<Stack spacing={1} sx={{ width: 300 }}>
<Autocomplete
{...defaultProps}
id="disable-close-on-select"
disableCloseOnSelect
renderInput={(params) => (
<TextField {...params} label="disableCloseOnSelect" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="clear-on-escape"
clearOnEscape
renderInput={(params) => (
<TextField {...params} label="clearOnEscape" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="disable-clearable"
disableClearable
renderInput={(params) => (
<TextField {...params} label="disableClearable" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="include-input-in-list"
includeInputInList
renderInput={(params) => (
<TextField {...params} label="includeInputInList" variant="standard" />
)}
/>
<Autocomplete
{...flatProps}
id="flat-demo"
renderInput={(params) => (
<TextField {...params} label="flat" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="controlled-demo"
value={value}
onChange={(event: any, newValue: FilmOptionType | null) => {
setValue(newValue);
}}
renderInput={(params) => (
<TextField {...params} label="controlled" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="auto-complete"
autoComplete
includeInputInList
renderInput={(params) => (
<TextField {...params} label="autoComplete" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="disable-list-wrap"
disableListWrap
renderInput={(params) => (
<TextField {...params} label="disableListWrap" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="open-on-focus"
openOnFocus
renderInput={(params) => (
<TextField {...params} label="openOnFocus" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="auto-highlight"
autoHighlight
renderInput={(params) => (
<TextField {...params} label="autoHighlight" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="auto-select"
autoSelect
renderInput={(params) => (
<TextField {...params} label="autoSelect" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="disabled"
disabled
renderInput={(params) => (
<TextField {...params} label="disabled" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="disable-portal"
disablePortal
renderInput={(params) => (
<TextField {...params} label="disablePortal" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="blur-on-select"
blurOnSelect
renderInput={(params) => (
<TextField {...params} label="blurOnSelect" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="clear-on-blur"
clearOnBlur
renderInput={(params) => (
<TextField {...params} label="clearOnBlur" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="select-on-focus"
selectOnFocus
renderInput={(params) => (
<TextField {...params} label="selectOnFocus" variant="standard" />
)}
/>
<Autocomplete
{...flatProps}
id="readOnly"
readOnly
defaultValue={flatProps.options[13]}
renderInput={(params) => (
<TextField {...params} label="readOnly" variant="standard" />
)}
/>
</Stack>
);
}
interface FilmOptionType {
title: string;
year: number;
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
Country select
Choose one of the 248 countries.
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
export default function CountrySelect() {
return (
<Autocomplete
id="country-select-demo"
sx={{ width: 300 }}
options={countries}
autoHighlight
getOptionLabel={(option) => option.label}
renderOption={(props, option) => {
const { key, ...optionProps } = props;
return (
<Box
key={key}
component="li"
sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
{...optionProps}
>
<img
loading="lazy"
width="20"
srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
alt=""
/>
{option.label} ({option.code}) +{option.phone}
</Box>
);
}}
renderInput={(params) => (
<TextField
{...params}
label="Choose a country"
slotProps={{
...params.slotProps,
htmlInput: {
...params.slotProps.htmlInput,
autoComplete: 'new-password', // disable autocomplete and autofill
},
}}
/>
)}
/>
);
}
interface CountryType {
code: string;
label: string;
phone: string;
suggested?: boolean;
}
// From https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js
const countries: readonly CountryType[] = [
{ code: 'AD', label: 'Andorra', phone: '376' },
{
code: 'AE',
label: 'United Arab Emirates',
phone: '971',
},
{ code: 'AF', label: 'Afghanistan', phone: '93' },
{
code: 'AG',
label: 'Antigua and Barbuda',
phone: '1-268',
},
{ code: 'AI', label: 'Anguilla', phone: '1-264' },
{ code: 'AL', label: 'Albania', phone: '355' },
{ code: 'AM', label: 'Armenia', phone: '374' },
{ code: 'AO', label: 'Angola', phone: '244' },
{ code: 'AQ', label: 'Antarctica', phone: '672' },
{ code: 'AR', label: 'Argentina', phone: '54' },
{ code: 'AS', label: 'American Samoa', phone: '1-684' },
{ code: 'AT', label: 'Austria', phone: '43' },
{
code: 'AU',
label: 'Australia',
phone: '61',
suggested: true,
},
{ code: 'AW', label: 'Aruba', phone: '297' },
{ code: 'AX', label: 'Alland Islands', phone: '358' },
{ code: 'AZ', label: 'Azerbaijan', phone: '994' },
{
code: 'BA',
label: 'Bosnia and Herzegovina',
phone: '387',
},
{ code: 'BB', label: 'Barbados', phone: '1-246' },
{ code: 'BD', label: 'Bangladesh', phone: '880' },
{ code: 'BE', label: 'Belgium', phone: '32' },
{ code: 'BF', label: 'Burkina Faso', phone: '226' },
{ code: 'BG', label: 'Bulgaria', phone: '359' },
{ code: 'BH', label: 'Bahrain', phone: '973' },
{ code: 'BI', label: 'Burundi', phone: '257' },
{ code: 'BJ', label: 'Benin', phone: '229' },
{ code: 'BL', label: 'Saint Barthelemy', phone: '590' },
{ code: 'BM', label: 'Bermuda', phone: '1-441' },
{ code: 'BN', label: 'Brunei Darussalam', phone: '673' },
{ code: 'BO', label: 'Bolivia', phone: '591' },
{ code: 'BR', label: 'Brazil', phone: '55' },
{ code: 'BS', label: 'Bahamas', phone: '1-242' },
{ code: 'BT', label: 'Bhutan', phone: '975' },
{ code: 'BV', label: 'Bouvet Island', phone: '47' },
{ code: 'BW', label: 'Botswana', phone: '267' },
{ code: 'BY', label: 'Belarus', phone: '375' },
{ code: 'BZ', label: 'Belize', phone: '501' },
{
code: 'CA',
label: 'Canada',
phone: '1',
suggested: true,
},
{
code: 'CC',
label: 'Cocos (Keeling) Islands',
phone: '61',
},
{
code: 'CD',
label: 'Congo, Democratic Republic of the',
phone: '243',
},
{
code: 'CF',
label: 'Central African Republic',
phone: '236',
},
{
code: 'CG',
label: 'Congo, Republic of the',
phone: '242',
},
{ code: 'CH', label: 'Switzerland', phone: '41' },
{ code: 'CI', label: "Cote d'Ivoire", phone: '225' },
{ code: 'CK', label: 'Cook Islands', phone: '682' },
{ code: 'CL', label: 'Chile', phone: '56' },
{ code: 'CM', label: 'Cameroon', phone: '237' },
{ code: 'CN', label: 'China', phone: '86' },
{ code: 'CO', label: 'Colombia', phone: '57' },
{ code: 'CR', label: 'Costa Rica', phone: '506' },
{ code: 'CU', label: 'Cuba', phone: '53' },
{ code: 'CV', label: 'Cape Verde', phone: '238' },
{ code: 'CW', label: 'Curacao', phone: '599' },
{ code: 'CX', label: 'Christmas Island', phone: '61' },
{ code: 'CY', label: 'Cyprus', phone: '357' },
{ code: 'CZ', label: 'Czech Republic', phone: '420' },
{
code: 'DE',
label: 'Germany',
phone: '49',
suggested: true,
},
{ code: 'DJ', label: 'Djibouti', phone: '253' },
{ code: 'DK', label: 'Denmark', phone: '45' },
{ code: 'DM', label: 'Dominica', phone: '1-767' },
{
code: 'DO',
label: 'Dominican Republic',
phone: '1-809',
},
{ code: 'DZ', label: 'Algeria', phone: '213' },
{ code: 'EC', label: 'Ecuador', phone: '593' },
{ code: 'EE', label: 'Estonia', phone: '372' },
{ code: 'EG', label: 'Egypt', phone: '20' },
{ code: 'EH', label: 'Western Sahara', phone: '212' },
{ code: 'ER', label: 'Eritrea', phone: '291' },
{ code: 'ES', label: 'Spain', phone: '34' },
{ code: 'ET', label: 'Ethiopia', phone: '251' },
{ code: 'FI', label: 'Finland', phone: '358' },
{ code: 'FJ', label: 'Fiji', phone: '679' },
{
code: 'FK',
label: 'Falkland Islands (Malvinas)',
phone: '500',
},
{
code: 'FM',
label: 'Micronesia, Federated States of',
phone: '691',
},
{ code: 'FO', label: 'Faroe Islands', phone: '298' },
{
code: 'FR',
label: 'France',
phone: '33',
suggested: true,
},
{ code: 'GA', label: 'Gabon', phone: '241' },
{ code: 'GB', label: 'United Kingdom', phone: '44' },
{ code: 'GD', label: 'Grenada', phone: '1-473' },
{ code: 'GE', label: 'Georgia', phone: '995' },
{ code: 'GF', label: 'French Guiana', phone: '594' },
{ code: 'GG', label: 'Guernsey', phone: '44' },
{ code: 'GH', label: 'Ghana', phone: '233' },
{ code: 'GI', label: 'Gibraltar', phone: '350' },
{ code: 'GL', label: 'Greenland', phone: '299' },
{ code: 'GM', label: 'Gambia', phone: '220' },
{ code: 'GN', label: 'Guinea', phone: '224' },
{ code: 'GP', label: 'Guadeloupe', phone: '590' },
{ code: 'GQ', label: 'Equatorial Guinea', phone: '240' },
{ code: 'GR', label: 'Greece', phone: '30' },
{
code: 'GS',
label: 'South Georgia and the South Sandwich Islands',
phone: '500',
},
{ code: 'GT', label: 'Guatemala', phone: '502' },
{ code: 'GU', label: 'Guam', phone: '1-671' },
{ code: 'GW', label: 'Guinea-Bissau', phone: '245' },
{ code: 'GY', label: 'Guyana', phone: '592' },
{ code: 'HK', label: 'Hong Kong', phone: '852' },
{
code: 'HM',
label: 'Heard Island and McDonald Islands',
phone: '672',
},
{ code: 'HN', label: 'Honduras', phone: '504' },
{ code: 'HR', label: 'Croatia', phone: '385' },
{ code: 'HT', label: 'Haiti', phone: '509' },
{ code: 'HU', label: 'Hungary', phone: '36' },
{ code: 'ID', label: 'Indonesia', phone: '62' },
{ code: 'IE', label: 'Ireland', phone: '353' },
{ code: 'IL', label: 'Israel', phone: '972' },
{ code: 'IM', label: 'Isle of Man', phone: '44' },
{ code: 'IN', label: 'India', phone: '91' },
{
code: 'IO',
label: 'British Indian Ocean Territory',
phone: '246',
},
{ code: 'IQ', label: 'Iraq', phone: '964' },
{
code: 'IR',
label: 'Iran, Islamic Republic of',
phone: '98',
},
{ code: 'IS', label: 'Iceland', phone: '354' },
{ code: 'IT', label: 'Italy', phone: '39' },
{ code: 'JE', label: 'Jersey', phone: '44' },
{ code: 'JM', label: 'Jamaica', phone: '1-876' },
{ code: 'JO', label: 'Jordan', phone: '962' },
{
code: 'JP',
label: 'Japan',
phone: '81',
suggested: true,
},
{ code: 'KE', label: 'Kenya', phone: '254' },
{ code: 'KG', label: 'Kyrgyzstan', phone: '996' },
{ code: 'KH', label: 'Cambodia', phone: '855' },
{ code: 'KI', label: 'Kiribati', phone: '686' },
{ code: 'KM', label: 'Comoros', phone: '269' },
{
code: 'KN',
label: 'Saint Kitts and Nevis',
phone: '1-869',
},
{
code: 'KP',
label: "Korea, Democratic People's Republic of",
phone: '850',
},
{ code: 'KR', label: 'Korea, Republic of', phone: '82' },
{ code: 'KW', label: 'Kuwait', phone: '965' },
{ code: 'KY', label: 'Cayman Islands', phone: '1-345' },
{ code: 'KZ', label: 'Kazakhstan', phone: '7' },
{
code: 'LA',
label: "Lao People's Democratic Republic",
phone: '856',
},
{ code: 'LB', label: 'Lebanon', phone: '961' },
{ code: 'LC', label: 'Saint Lucia', phone: '1-758' },
{ code: 'LI', label: 'Liechtenstein', phone: '423' },
{ code: 'LK', label: 'Sri Lanka', phone: '94' },
{ code: 'LR', label: 'Liberia', phone: '231' },
{ code: 'LS', label: 'Lesotho', phone: '266' },
{ code: 'LT', label: 'Lithuania', phone: '370' },
{ code: 'LU', label: 'Luxembourg', phone: '352' },
{ code: 'LV', label: 'Latvia', phone: '371' },
{ code: 'LY', label: 'Libya', phone: '218' },
{ code: 'MA', label: 'Morocco', phone: '212' },
{ code: 'MC', label: 'Monaco', phone: '377' },
{
code: 'MD',
label: 'Moldova, Republic of',
phone: '373',
},
{ code: 'ME', label: 'Montenegro', phone: '382' },
{
code: 'MF',
label: 'Saint Martin (French part)',
phone: '590',
},
{ code: 'MG', label: 'Madagascar', phone: '261' },
{ code: 'MH', label: 'Marshall Islands', phone: '692' },
{
code: 'MK',
label: 'Macedonia, the Former Yugoslav Republic of',
phone: '389',
},
{ code: 'ML', label: 'Mali', phone: '223' },
{ code: 'MM', label: 'Myanmar', phone: '95' },
{ code: 'MN', label: 'Mongolia', phone: '976' },
{ code: 'MO', label: 'Macao', phone: '853' },
{
code: 'MP',
label: 'Northern Mariana Islands',
phone: '1-670',
},
{ code: 'MQ', label: 'Martinique', phone: '596' },
{ code: 'MR', label: 'Mauritania', phone: '222' },
{ code: 'MS', label: 'Montserrat', phone: '1-664' },
{ code: 'MT', label: 'Malta', phone: '356' },
{ code: 'MU', label: 'Mauritius', phone: '230' },
{ code: 'MV', label: 'Maldives', phone: '960' },
{ code: 'MW', label: 'Malawi', phone: '265' },
{ code: 'MX', label: 'Mexico', phone: '52' },
{ code: 'MY', label: 'Malaysia', phone: '60' },
{ code: 'MZ', label: 'Mozambique', phone: '258' },
{ code: 'NA', label: 'Namibia', phone: '264' },
{ code: 'NC', label: 'New Caledonia', phone: '687' },
{ code: 'NE', label: 'Niger', phone: '227' },
{ code: 'NF', label: 'Norfolk Island', phone: '672' },
{ code: 'NG', label: 'Nigeria', phone: '234' },
{ code: 'NI', label: 'Nicaragua', phone: '505' },
{ code: 'NL', label: 'Netherlands', phone: '31' },
{ code: 'NO', label: 'Norway', phone: '47' },
{ code: 'NP', label: 'Nepal', phone: '977' },
{ code: 'NR', label: 'Nauru', phone: '674' },
{ code: 'NU', label: 'Niue', phone: '683' },
{ code: 'NZ', label: 'New Zealand', phone: '64' },
{ code: 'OM', label: 'Oman', phone: '968' },
{ code: 'PA', label: 'Panama', phone: '507' },
{ code: 'PE', label: 'Peru', phone: '51' },
{ code: 'PF', label: 'French Polynesia', phone: '689' },
{ code: 'PG', label: 'Papua New Guinea', phone: '675' },
{ code: 'PH', label: 'Philippines', phone: '63' },
{ code: 'PK', label: 'Pakistan', phone: '92' },
{ code: 'PL', label: 'Poland', phone: '48' },
{
code: 'PM',
label: 'Saint Pierre and Miquelon',
phone: '508',
},
{ code: 'PN', label: 'Pitcairn', phone: '870' },
{ code: 'PR', label: 'Puerto Rico', phone: '1' },
{
code: 'PS',
label: 'Palestine, State of',
phone: '970',
},
{ code: 'PT', label: 'Portugal', phone: '351' },
{ code: 'PW', label: 'Palau', phone: '680' },
{ code: 'PY', label: 'Paraguay', phone: '595' },
{ code: 'QA', label: 'Qatar', phone: '974' },
{ code: 'RE', label: 'Reunion', phone: '262' },
{ code: 'RO', label: 'Romania', phone: '40' },
{ code: 'RS', label: 'Serbia', phone: '381' },
{ code: 'RU', label: 'Russian Federation', phone: '7' },
{ code: 'RW', label: 'Rwanda', phone: '250' },
{ code: 'SA', label: 'Saudi Arabia', phone: '966' },
{ code: 'SB', label: 'Solomon Islands', phone: '677' },
{ code: 'SC', label: 'Seychelles', phone: '248' },
{ code: 'SD', label: 'Sudan', phone: '249' },
{ code: 'SE', label: 'Sweden', phone: '46' },
{ code: 'SG', label: 'Singapore', phone: '65' },
{ code: 'SH', label: 'Saint Helena', phone: '290' },
{ code: 'SI', label: 'Slovenia', phone: '386' },
{
code: 'SJ',
label: 'Svalbard and Jan Mayen',
phone: '47',
},
{ code: 'SK', label: 'Slovakia', phone: '421' },
{ code: 'SL', label: 'Sierra Leone', phone: '232' },
{ code: 'SM', label: 'San Marino', phone: '378' },
{ code: 'SN', label: 'Senegal', phone: '221' },
{ code: 'SO', label: 'Somalia', phone: '252' },
{ code: 'SR', label: 'Suriname', phone: '597' },
{ code: 'SS', label: 'South Sudan', phone: '211' },
{
code: 'ST',
label: 'Sao Tome and Principe',
phone: '239',
},
{ code: 'SV', label: 'El Salvador', phone: '503' },
{
code: 'SX',
label: 'Sint Maarten (Dutch part)',
phone: '1-721',
},
{
code: 'SY',
label: 'Syrian Arab Republic',
phone: '963',
},
{ code: 'SZ', label: 'Swaziland', phone: '268' },
{
code: 'TC',
label: 'Turks and Caicos Islands',
phone: '1-649',
},
{ code: 'TD', label: 'Chad', phone: '235' },
{
code: 'TF',
label: 'French Southern Territories',
phone: '262',
},
{ code: 'TG', label: 'Togo', phone: '228' },
{ code: 'TH', label: 'Thailand', phone: '66' },
{ code: 'TJ', label: 'Tajikistan', phone: '992' },
{ code: 'TK', label: 'Tokelau', phone: '690' },
{ code: 'TL', label: 'Timor-Leste', phone: '670' },
{ code: 'TM', label: 'Turkmenistan', phone: '993' },
{ code: 'TN', label: 'Tunisia', phone: '216' },
{ code: 'TO', label: 'Tonga', phone: '676' },
{ code: 'TR', label: 'Turkey', phone: '90' },
{
code: 'TT',
label: 'Trinidad and Tobago',
phone: '1-868',
},
{ code: 'TV', label: 'Tuvalu', phone: '688' },
{
code: 'TW',
label: 'Taiwan',
phone: '886',
},
{
code: 'TZ',
label: 'United Republic of Tanzania',
phone: '255',
},
{ code: 'UA', label: 'Ukraine', phone: '380' },
{ code: 'UG', label: 'Uganda', phone: '256' },
{
code: 'US',
label: 'United States',
phone: '1',
suggested: true,
},
{ code: 'UY', label: 'Uruguay', phone: '598' },
{ code: 'UZ', label: 'Uzbekistan', phone: '998' },
{
code: 'VA',
label: 'Holy See (Vatican City State)',
phone: '379',
},
{
code: 'VC',
label: 'Saint Vincent and the Grenadines',
phone: '1-784',
},
{ code: 'VE', label: 'Venezuela', phone: '58' },
{
code: 'VG',
label: 'British Virgin Islands',
phone: '1-284',
},
{
code: 'VI',
label: 'US Virgin Islands',
phone: '1-340',
},
{ code: 'VN', label: 'Vietnam', phone: '84' },
{ code: 'VU', label: 'Vanuatu', phone: '678' },
{ code: 'WF', label: 'Wallis and Futuna', phone: '681' },
{ code: 'WS', label: 'Samoa', phone: '685' },
{ code: 'XK', label: 'Kosovo', phone: '383' },
{ code: 'YE', label: 'Yemen', phone: '967' },
{ code: 'YT', label: 'Mayotte', phone: '262' },
{ code: 'ZA', label: 'South Africa', phone: '27' },
{ code: 'ZM', label: 'Zambia', phone: '260' },
{ code: 'ZW', label: 'Zimbabwe', phone: '263' },
];
Controlled states
The component has two states that can be controlled:
- the "value" state with the
value/onChangeprops combination. This state represents the value selected by the user, for instance when pressing Enter. - the "input value" state with the
inputValue/onInputChangeprops combination. This state represents the value displayed in the textbox.
These two states are isolated, and should be controlled independently.
value: 'Option 1'
inputValue: ''
import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
const options = ['Option 1', 'Option 2'];
export default function ControllableStates() {
const [value, setValue] = React.useState<string | null>(options[0]);
const [inputValue, setInputValue] = React.useState('');
return (
<div>
<div>{`value: ${value !== null ? `'${value}'` : 'null'}`}</div>
<div>{`inputValue: '${inputValue}'`}</div>
<br />
<Autocomplete
value={value}
onChange={(event: any, newValue: string | null) => {
setValue(newValue);
}}
inputValue={inputValue}
onInputChange={(event, newInputValue) => {
setInputValue(newInputValue);
}}
id="controllable-states-demo"
options={options}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Controllable" />}
/>
</div>
);
}
Free solo
Set freeSolo to true so the textbox can contain any arbitrary value.
Search input
The prop is designed to cover the primary use case of a search input with suggestions, for example Google search or react-autowhatever.
import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
import Autocomplete from '@mui/material/Autocomplete';
export default function FreeSolo() {
return (
<Stack spacing={2} sx={{ width: 300 }}>
<Autocomplete
id="free-solo-demo"
freeSolo
resetHighlightOnMouseLeave
options={top100Films.map((option) => option.title)}
renderInput={(params) => <TextField {...params} label="freeSolo" />}
/>
<Autocomplete
freeSolo
resetHighlightOnMouseLeave
id="free-solo-2-demo"
disableClearable
options={top100Films.map((option) => option.title)}
renderInput={(params) => (
<TextField
{...params}
label="Search input"
slotProps={{
...params.slotProps,
input: {
...params.slotProps.input,
type: 'search',
},
}}
/>
)}
/>
<Autocomplete
id="free-solo-demo3"
freeSolo
resetHighlightOnMouseLeave
options={top100Films}
renderInput={(params) => (
<TextField {...params} label="freeSolo (handle string values)" />
)}
getOptionLabel={(option) =>
typeof option === 'string' ? option : option.title
}
// this demo demonstrates how the value parameter can be either an object (same type as option) or a string
// it could become a string if, for example, you press "Enter" in the input field
isOptionEqualToValue={(option, value) => {
if (typeof value === 'string') {
return option.title === value;
}
return option.title === value.title;
}}
/>
</Stack>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
Creatable
If you intend to use this mode for a combo box like experience (an enhanced version of a select element) we recommend setting:
selectOnFocusto help the user clear the selected value.clearOnBlurto help the user enter a new value.handleHomeEndKeysto move focus inside the popup with the Home and End keys.resetHighlightOnMouseLeaveto clear mouse-created highlights when the pointer leaves the popup.- A last option, for instance:
Add "YOUR SEARCH".
import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
const filter = createFilterOptions<FilmOptionType>();
export default function FreeSoloCreateOption() {
const [value, setValue] = React.useState<FilmOptionType | null>(null);
return (
<Autocomplete
value={value}
onChange={(event, newValue) => {
if (typeof newValue === 'string') {
setValue({
title: newValue,
});
} else if (newValue && newValue.inputValue) {
// Create a new value from the user input
setValue({
title: newValue.inputValue,
});
} else {
setValue(newValue);
}
}}
filterOptions={(options, params) => {
const filtered = filter(options, params);
const { inputValue } = params;
// Suggest the creation of a new value
const isExisting = options.some((option) => inputValue === option.title);
if (inputValue !== '' && !isExisting) {
filtered.push({
inputValue,
title: `Add "${inputValue}"`,
});
}
return filtered;
}}
selectOnFocus
clearOnBlur
handleHomeEndKeys
id="free-solo-with-text-demo"
options={top100Films}
getOptionLabel={(option) => {
// Value selected with enter, right from the input
if (typeof option === 'string') {
return option;
}
// Add "xxx" option created dynamically
if (option.inputValue) {
return option.inputValue;
}
// Regular option
return option.title;
}}
renderOption={(props, option) => {
const { key, ...optionProps } = props;
return (
<li key={key} {...optionProps}>
{option.title}
</li>
);
}}
sx={{ width: 300 }}
freeSolo
resetHighlightOnMouseLeave
renderInput={(params) => (
<TextField {...params} label="Free solo with text demo" />
)}
/>
);
}
interface FilmOptionType {
inputValue?: string;
title: string;
year?: number;
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films: readonly FilmOptionType[] = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
You could also display a dialog when the user wants to add a new value.
import * as React from 'react';
import TextField from '@mui/material/TextField';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogActions from '@mui/material/DialogActions';
import Button from '@mui/material/Button';
import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
const filter = createFilterOptions<FilmOptionType>();
export default function FreeSoloCreateOptionDialog() {
const [value, setValue] = React.useState<FilmOptionType | null>(null);
const [open, toggleOpen] = React.useState(false);
const handleClose = () => {
setDialogValue({
title: '',
year: '',
});
toggleOpen(false);
};
const [dialogValue, setDialogValue] = React.useState({
title: '',
year: '',
});
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
setValue({
title: dialogValue.title,
year: parseInt(dialogValue.year, 10),
});
handleClose();
};
return (
<React.Fragment>
<Autocomplete
value={value}
onChange={(event, newValue) => {
if (typeof newValue === 'string') {
// timeout to avoid instant validation of the dialog's form.
setTimeout(() => {
toggleOpen(true);
setDialogValue({
title: newValue,
year: '',
});
});
} else if (newValue && newValue.inputValue) {
toggleOpen(true);
setDialogValue({
title: newValue.inputValue,
year: '',
});
} else {
setValue(newValue);
}
}}
filterOptions={(options, params) => {
const filtered = filter(options, params);
if (params.inputValue !== '') {
filtered.push({
inputValue: params.inputValue,
title: `Add "${params.inputValue}"`,
});
}
return filtered;
}}
id="free-solo-dialog-demo"
options={top100Films}
getOptionLabel={(option) => {
// for example value selected with enter, right from the input
if (typeof option === 'string') {
return option;
}
if (option.inputValue) {
return option.inputValue;
}
return option.title;
}}
selectOnFocus
clearOnBlur
handleHomeEndKeys
renderOption={(props, option) => {
const { key, ...optionProps } = props;
return (
<li key={key} {...optionProps}>
{option.title}
</li>
);
}}
sx={{ width: 300 }}
freeSolo
resetHighlightOnMouseLeave
renderInput={(params) => <TextField {...params} label="Free solo dialog" />}
/>
<Dialog open={open} onClose={handleClose}>
<form onSubmit={handleSubmit}>
<DialogTitle>Add a new film</DialogTitle>
<DialogContent>
<DialogContentText>
Did you miss any film in our list? Please, add it!
</DialogContentText>
<TextField
autoFocus
margin="dense"
id="name"
value={dialogValue.title}
onChange={(event) =>
setDialogValue({
...dialogValue,
title: event.target.value,
})
}
label="title"
type="text"
variant="standard"
/>
<TextField
margin="dense"
id="name"
value={dialogValue.year}
onChange={(event) =>
setDialogValue({
...dialogValue,
year: event.target.value,
})
}
label="year"
type="number"
variant="standard"
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button type="submit">Add</Button>
</DialogActions>
</form>
</Dialog>
</React.Fragment>
);
}
interface FilmOptionType {
inputValue?: string;
title: string;
year?: number;
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films: readonly FilmOptionType[] = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
Grouped
You can group the options with the groupBy prop.
If you do so, make sure that the options are also sorted with the same dimension that they are grouped by,
otherwise, you will notice duplicate headers.
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
export default function Grouped() {
const options = top100Films.map((option) => {
const firstLetter = option.title[0].toUpperCase();
return {
firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter,
...option,
};
});
return (
<Autocomplete
options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
groupBy={(option) => option.firstLetter}
getOptionLabel={(option) => option.title}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="With categories" />}
/>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
To control how the groups are rendered, provide a custom renderGroup prop.
This is a function that accepts an object with two fields:
group—a string representing a group namechildren—a collection of list items that belong to the group
The following demo shows how to use this prop to define custom markup and override the styles of the default groups:
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import { styled, lighten, darken } from '@mui/system';
const GroupHeader = styled('div')(({ theme }) => ({
position: 'sticky',
top: '-8px',
padding: '4px 10px',
color: theme.palette.primary.main,
backgroundColor: lighten(theme.palette.primary.light, 0.85),
...theme.applyStyles('dark', {
backgroundColor: darken(theme.palette.primary.main, 0.8),
}),
}));
const GroupItems = styled('ul')({
padding: 0,
});
export default function RenderGroup() {
const options = top100Films.map((option) => {
const firstLetter = option.title[0].toUpperCase();
return {
firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter,
...option,
};
});
return (
<Autocomplete
options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
groupBy={(option) => option.firstLetter}
getOptionLabel={(option) => option.title}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="With categories" />}
renderGroup={(params) => (
<li key={params.key}>
<GroupHeader>{params.group}</GroupHeader>
<GroupItems>{params.children}</GroupItems>
</li>
)}
/>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
export default function DisabledOptions() {
return (
<Autocomplete
options={timeSlots}
getOptionDisabled={(option) =>
option === timeSlots[0] || option === timeSlots[2]
}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Disabled options" />}
/>
);
}
// One time slot every 30 minutes.
const timeSlots = Array.from(new Array(24 * 2)).map(
(_, index) =>
`${index < 20 ? '0' : ''}${Math.floor(index / 2)}:${
index % 2 === 0 ? '00' : '30'
}`,
);
useAutocomplete
For advanced customization use cases, a headless useAutocomplete() hook is exposed.
It accepts almost the same options as the Autocomplete component minus all the props
related to the rendering of JSX.
The Autocomplete component is built on this hook.
import useAutocomplete from '@mui/material/useAutocomplete';
import useAutocomplete from '@mui/material/useAutocomplete';
import { styled } from '@mui/system';
const Label = styled('label')({
display: 'block',
});
const Input = styled('input')(({ theme }) => ({
width: 200,
backgroundColor: '#fff',
color: '#000',
...theme.applyStyles('dark', {
backgroundColor: '#000',
color: '#fff',
}),
}));
const Listbox = styled('ul')(({ theme }) => ({
width: 200,
margin: 0,
padding: 0,
zIndex: 1,
position: 'absolute',
listStyle: 'none',
backgroundColor: '#fff',
overflow: 'auto',
maxHeight: 200,
border: '1px solid rgba(0,0,0,.25)',
'& li.Mui-focused': {
backgroundColor: '#4a8df6',
color: 'white',
cursor: 'pointer',
},
'& li:active': {
backgroundColor: '#2977f5',
color: 'white',
},
...theme.applyStyles('dark', {
backgroundColor: '#000',
}),
}));
export default function UseAutocomplete() {
const {
getRootProps,
getInputLabelProps,
getInputProps,
getListboxProps,
getOptionProps,
groupedOptions,
} = useAutocomplete({
id: 'use-autocomplete-demo',
options: top100Films,
getOptionLabel: (option) => option.title,
});
return (
<div>
<div {...getRootProps()}>
<Label {...getInputLabelProps()}>useAutocomplete</Label>
<Input {...getInputProps()} />
</div>
{groupedOptions.length > 0 ? (
<Listbox {...getListboxProps()}>
{groupedOptions.map((option, index) => {
const { key, ...optionProps } = getOptionProps({ option, index });
return (
<li key={key} {...optionProps}>
{option.title}
</li>
);
})}
</Listbox>
) : null}
</div>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
The Godfather
import useAutocomplete from '@mui/material/useAutocomplete';
import type {
AutocompleteGetItemProps,
UseAutocompleteProps,
} from '@mui/material/useAutocomplete';
import CheckIcon from '@mui/icons-material/Check';
import CloseIcon from '@mui/icons-material/Close';
import { styled } from '@mui/material/styles';
import { autocompleteClasses } from '@mui/material/Autocomplete';
const Root = styled('div')(({ theme }) => ({
color: 'rgba(0,0,0,0.85)',
fontSize: '14px',
...theme.applyStyles('dark', {
color: 'rgba(255,255,255,0.65)',
}),
}));
const Label = styled('label')`
padding: 0 0 4px;
line-height: 1.5;
display: block;
`;
const InputWrapper = styled('div')(({ theme }) => ({
width: '300px',
border: '1px solid #d9d9d9',
backgroundColor: '#fff',
borderRadius: '4px',
padding: '1px',
display: 'flex',
flexWrap: 'wrap',
...theme.applyStyles('dark', {
borderColor: '#434343',
backgroundColor: '#141414',
}),
'&:hover': {
borderColor: '#40a9ff',
...theme.applyStyles('dark', {
borderColor: '#177ddc',
}),
},
'&.focused': {
borderColor: '#40a9ff',
boxShadow: '0 0 0 2px rgb(24 144 255 / 0.2)',
...theme.applyStyles('dark', {
borderColor: '#177ddc',
}),
},
'& input': {
backgroundColor: '#fff',
color: 'rgba(0,0,0,.85)',
height: '30px',
boxSizing: 'border-box',
padding: '4px 6px',
width: '0',
minWidth: '30px',
flexGrow: 1,
border: 0,
margin: 0,
outline: 0,
...theme.applyStyles('dark', {
color: 'rgba(255,255,255,0.65)',
backgroundColor: '#141414',
}),
},
}));
interface ItemProps extends ReturnType<AutocompleteGetItemProps<true>> {
label: string;
}
function Item(props: ItemProps) {
const { label, onDelete, ...other } = props;
return (
<div {...other}>
<span>{label}</span>
<CloseIcon onClick={onDelete} />
</div>
);
}
const StyledItem = styled(Item)<ItemProps>(({ theme }) => ({
display: 'flex',
alignItems: 'center',
height: '24px',
margin: '2px',
lineHeight: '22px',
backgroundColor: '#fafafa',
border: `1px solid #e8e8e8`,
borderRadius: '2px',
boxSizing: 'content-box',
padding: '0 4px 0 10px',
outline: 0,
overflow: 'hidden',
...theme.applyStyles('dark', {
backgroundColor: 'rgba(255,255,255,0.08)',
borderColor: '#303030',
}),
'&:focus': {
borderColor: '#40a9ff',
backgroundColor: '#e6f7ff',
...theme.applyStyles('dark', {
backgroundColor: '#003b57',
borderColor: '#177ddc',
}),
},
'& span': {
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
},
'& svg': {
fontSize: '12px',
cursor: 'pointer',
padding: '4px',
},
}));
const Listbox = styled('ul')(({ theme }) => ({
width: '300px',
margin: '2px 0 0',
padding: 0,
position: 'absolute',
listStyle: 'none',
backgroundColor: '#fff',
overflow: 'auto',
maxHeight: '250px',
borderRadius: '4px',
boxShadow: '0 2px 8px rgb(0 0 0 / 0.15)',
zIndex: 1,
...theme.applyStyles('dark', {
backgroundColor: '#141414',
}),
'& li': {
padding: '5px 12px',
display: 'flex',
'& span': {
flexGrow: 1,
},
'& svg': {
color: 'transparent',
},
},
"& li[aria-selected='true']": {
backgroundColor: '#fafafa',
fontWeight: 600,
...theme.applyStyles('dark', {
backgroundColor: '#2b2b2b',
}),
'& svg': {
color: '#1890ff',
},
},
[`& li.${autocompleteClasses.focused}`]: {
backgroundColor: '#e6f7ff',
cursor: 'pointer',
...theme.applyStyles('dark', {
backgroundColor: '#003b57',
}),
'& svg': {
color: 'currentColor',
},
},
}));
function CustomAutocomplete<Value>(
props: UseAutocompleteProps<Value, true, false, false>,
) {
const {
getRootProps,
getInputLabelProps,
getInputProps,
getItemProps,
getListboxProps,
getOptionProps,
groupedOptions,
value,
focused,
setAnchorEl,
} = useAutocomplete({
multiple: true,
...props,
});
return (
<Root>
<div {...getRootProps()}>
<Label {...getInputLabelProps()}>Customized hook</Label>
<InputWrapper ref={setAnchorEl} className={focused ? 'focused' : ''}>
{value.map((option, index) => {
const { key, ...itemProps } = getItemProps({ index });
return (
<StyledItem
key={key}
{...itemProps}
label={props.getOptionLabel!(option)}
/>
);
})}
<input {...getInputProps()} />
</InputWrapper>
</div>
{groupedOptions.length > 0 ? (
<Listbox {...getListboxProps()}>
{groupedOptions.map((option, index) => {
const { key, ...optionProps } = getOptionProps({ option, index });
return (
<li key={key} {...optionProps}>
<span>{props.getOptionLabel!(option)}</span>
<CheckIcon fontSize="small" />
</li>
);
})}
</Listbox>
) : null}
</Root>
);
}
export default function CustomizedHook() {
return (
<CustomAutocomplete<FilmOptionType>
id="customized-hook-demo"
defaultValue={[top100Films[1]]}
options={top100Films}
getOptionLabel={(option) => option.title}
/>
);
}
interface FilmOptionType {
title: string;
year: number;
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
Head to the customization section for an example with the Autocomplete component instead of the hook.
Asynchronous requests
The component supports two different asynchronous use-cases:
- Load on open: it waits for the component to be interacted with to load the options.
- Search as you type: a new request is made for each keystroke.
Load on open
It displays a progress state as long as the network request is pending.
import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import CircularProgress from '@mui/material/CircularProgress';
interface Film {
title: string;
year: number;
}
function sleep(duration: number): Promise<void> {
return new Promise<void>((resolve) => {
setTimeout(() => {
resolve();
}, duration);
});
}
export default function Asynchronous() {
const [open, setOpen] = React.useState(false);
const [options, setOptions] = React.useState<readonly Film[]>([]);
const [loading, setLoading] = React.useState(false);
const handleOpen = () => {
setOpen(true);
(async () => {
setLoading(true);
await sleep(1e3); // For demo purposes.
setLoading(false);
setOptions([...topFilms]);
})();
};
const handleClose = () => {
setOpen(false);
setOptions([]);
};
return (
<Autocomplete
sx={{ width: 300 }}
open={open}
onOpen={handleOpen}
onClose={handleClose}
isOptionEqualToValue={(option, value) => option.title === value.title}
getOptionLabel={(option) => option.title}
options={options}
loading={loading}
renderInput={(params) => (
<TextField
{...params}
label="Asynchronous"
slotProps={{
...params.slotProps,
input: {
...params.slotProps.input,
endAdornment: (
<React.Fragment>
{loading ? <CircularProgress color="inherit" size={20} /> : null}
{params.slotProps.input.endAdornment}
</React.Fragment>
),
},
}}
/>
)}
/>
);
}
// Top films as rated by IMDb users. http://www.imdb.com/chart/top
const topFilms = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
];
Search as you type
If your logic is fetching new options on each keystroke and using the current value of the textbox to filter on the server, you may want to consider throttling requests.
Additionally, you will need to disable the built-in filtering of the Autocomplete component by
overriding the filterOptions prop:
<Autocomplete filterOptions={(x) => x} />
Google Maps place
A customized UI for Google Maps Places Autocomplete. For this demo, we need to load the Google Maps JavaScript and Google Places API.
import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import Paper from '@mui/material/Paper';
import type { PaperProps } from '@mui/material/Paper';
import LocationOnIcon from '@mui/icons-material/LocationOn';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import parse from 'autosuggest-highlight/parse';
// For the sake of this demo, we have to use debounce to reduce Google Maps Places API quote use
// But prefer to use throttle in practice
// import throttle from 'lodash/throttle';
import { debounce } from '@mui/material/utils';
// This key was created specifically for the demo in mui.com.
// You need to create a new one for your application.
const GOOGLE_MAPS_API_KEY = 'AIzaSyC3aviU6KHXAjoSnxcw6qbOhjnFctbxPkE';
const useEnhancedEffect =
typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
function loadScript(src: string, position: HTMLElement) {
const script = document.createElement('script');
script.setAttribute('async', '');
script.src = src;
position.appendChild(script);
return script;
}
interface MainTextMatchedSubstrings {
offset: number;
length: number;
}
interface StructuredFormatting {
main_text: string;
main_text_matched_substrings: readonly MainTextMatchedSubstrings[];
secondary_text?: string;
}
interface PlaceType {
description: string;
structured_formatting: StructuredFormatting;
}
function CustomPaper(props: PaperProps) {
return (
<Paper {...props}>
{props.children}
{/* Legal requirement https://developers.google.com/maps/documentation/javascript/policies#logo */}
<Box
sx={(staticTheme) => ({
display: 'flex',
justifyContent: 'flex-end',
p: '5px 10px 6px 10px',
opacity: 0.9,
'& path': {
fill: '#5e5e5e',
},
...staticTheme.applyStyles('dark', {
opacity: 0.7,
'& path': {
fill: '#fff',
},
}),
})}
>
<svg
aria-label="Google Maps"
height="14"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 98 18"
width="77"
>
<path d="M7.08 13.96a6.9 6.9 0 01-4.99-2.05A6.7 6.7 0 010 6.98Q0 4.1 2.09 2.05A6.9 6.9 0 017.08 0a6.7 6.7 0 014.79 1.92l-1.35 1.35a4.8 4.8 0 00-3.44-1.36q-2.1 0-3.55 1.48a5 5 0 00-1.45 3.59q0 2.12 1.46 3.59a4.8 4.8 0 003.55 1.48 4.8 4.8 0 003.53-1.4q.84-.84 1.04-2.4H7.08v-1.9h6.42a6 6 0 01.1 1.19q0 2.8-1.65 4.46a6.4 6.4 0 01-4.87 1.96M22 12.68a4.4 4.4 0 01-3.2 1.29 4.4 4.4 0 01-3.2-1.29 4.3 4.3 0 01-1.31-3.21q0-1.92 1.31-3.21a4.4 4.4 0 013.2-1.29q1.9 0 3.2 1.29a4.3 4.3 0 011.31 3.21A4.3 4.3 0 0122 12.68m-4.99-1.26q.75.78 1.79.77 1.04 0 1.79-.77.75-.78.75-1.95 0-1.19-.74-1.96-.75-.77-1.8-.77t-1.8.77a2.7 2.7 0 00-.74 1.96q0 1.17.75 1.95m14.84 1.26q-1.3 1.29-3.2 1.29c-1.9 0-2.33-.43-3.2-1.29a4.3 4.3 0 01-1.31-3.21q0-1.92 1.31-3.21 1.3-1.29 3.2-1.29c1.9 0 2.33.43 3.2 1.29a4.3 4.3 0 011.31 3.21q0 1.92-1.31 3.21m-4.99-1.26q.75.78 1.79.77 1.04 0 1.79-.77.75-.78.75-1.95 0-1.19-.74-1.96c-.74-.77-1.09-.77-1.8-.77q-1.05 0-1.8.77a2.7 2.7 0 00-.74 1.96q0 1.17.75 1.95M38.32 18q-1.5 0-2.52-.8a4.5 4.5 0 01-1.46-1.86l1.72-.72q.27.65.85 1.12.59.48 1.41.48a2.3 2.3 0 001.76-.68q.64-.68.64-1.96v-.65h-.07a2.9 2.9 0 01-2.37 1.02 4 4 0 01-3.01-1.31 4.4 4.4 0 01-1.29-3.17 4.4 4.4 0 011.29-3.19 4 4 0 013.01-1.32q.76 0 1.39.29t.98.72h.07v-.72h1.87v8.07q0 2.35-1.2 3.52A4.2 4.2 0 0138.32 18m.13-5.81q1.02 0 1.71-.77a2.8 2.8 0 00.69-1.93q0-1.17-.69-1.96a2.2 2.2 0 00-1.71-.79q-1.03 0-1.77.78a2.8 2.8 0 00-.73 1.96q0 1.16.73 1.93.74.78 1.77.78M45.93.48v13.21h-1.98V.48zm5.41 13.48a4.38 4.38 0 01-4.46-4.49q0-1.98 1.23-3.24a4 4 0 013.01-1.26 3.8 3.8 0 012.68 1.07 5 5 0 011.17 1.8l.2.51-6.01 2.49a2.3 2.3 0 002.18 1.36q1.37 0 2.21-1.24l1.53 1.02q-.5.76-1.45 1.38-.92.6-2.29.6m-2.5-4.63l4.02-1.67a1.4 1.4 0 00-.63-.69 2 2 0 00-1.04-.26q-.87 0-1.63.72a2.4 2.4 0 00-.72 1.9m11.21 4.36V1.5h1.57l4.24 7.42h.07l4.24-7.42h1.57v12.19h-1.57V6.45l.07-2.04h-.07l-3.81 6.69h-.92l-3.81-6.69h-.07l.07 2.04v7.24zm16.31.27q-1.33 0-2.22-.77a2.5 2.5 0 01-.89-2.03q0-1.36 1.06-2.14 1.05-.77 2.61-.77 1.38 0 2.26.51v-.23q0-.91-.63-1.47A2.3 2.3 0 0077 6.51q-.68 0-1.23.32a1.6 1.6 0 00-.77.88l-1.43-.61q.28-.75 1.14-1.39a3.6 3.6 0 012.25-.64q1.6 0 2.66.94 1.05.93 1.06 2.64v5.04h-1.5v-1.16h-.08a3 3 0 01-2.74 1.43m.25-1.43q.97 0 1.76-.72.8-.72.79-1.71-.67-.54-1.99-.54-1.14 0-1.72.49-.58.5-.58 1.16 0 .61.53.97.54.35 1.21.35m9.97 1.43q-.96 0-1.71-.41a3 3 0 01-1.13-1.02h-.07l.07 1.16v3.68h-1.57V5.35h1.5v1.16h.07a3 3 0 011.13-1.02 3.67 3.67 0 014.5.87 4.5 4.5 0 011.18 3.17q0 1.9-1.18 3.17a3.7 3.7 0 01-2.79 1.26m-.26-1.43q1.1 0 1.87-.83.78-.82.78-2.19t-.78-2.19a2.5 2.5 0 00-1.87-.83q-1.11 0-1.88.82-.78.81-.77 2.2c.01 1.39.26 1.65.77 2.2q.78.82 1.88.82m8.39 1.43a3.8 3.8 0 01-3.65-2.38l1.4-.58q.67 1.57 2.26 1.57.73 0 1.2-.32a1 1 0 00.47-.85q0-.81-1.14-1.11l-1.69-.41a4 4 0 01-1.52-.77 1.9 1.9 0 01-.72-1.54q0-1.11.98-1.8a4 4 0 012.32-.69q1.11 0 1.98.5t1.24 1.44l-1.34.56q-.46-1.11-1.91-1.11-.7 0-1.18.29t-.48.78q0 .72 1.11.97l1.65.39a3 3 0 011.74.94q.56.66.56 1.5 0 1.12-.92 1.87-.9.75-2.36.75" />
</svg>
</Box>
</Paper>
);
}
const fetch = debounce(
async (
request: { input: string; sessionToken: any },
callback: (results?: readonly PlaceType[]) => void,
) => {
try {
const { suggestions } = await (
window as any
).google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions(
request,
);
callback(
suggestions.map((suggestion: any) => {
const place = suggestion.placePrediction;
// Map to the old AutocompleteService.getPlacePredictions format
// https://developers.google.com/maps/documentation/javascript/places-migration-autocomplete
return {
description: place.text.text,
structured_formatting: {
main_text: place.mainText.text,
main_text_matched_substrings: place.mainText.matches.map(
(match: any) => ({
offset: match.startOffset,
length: match.endOffset - match.startOffset,
}),
),
secondary_text: place.secondaryText?.text,
},
};
}),
);
} catch (err: any) {
if (err.message.startsWith('Quota exceeded for quota')) {
callback(request.input.length === 1 ? fakeAnswer.p : fakeAnswer.paris);
}
throw err;
}
},
400,
);
const emptyOptions = [] as any;
let sessionToken: any;
export default function GoogleMaps() {
const [value, setValue] = React.useState<PlaceType | null>(null);
const [inputValue, setInputValue] = React.useState('');
const [options, setOptions] = React.useState<readonly PlaceType[]>(emptyOptions);
const callbackId = React.useId().replace(/[^\w]/g, '');
const [loaded, setLoaded] = React.useState(false);
if (typeof window !== 'undefined') {
if (!document.querySelector('#google-maps')) {
const GOOGLE_NAMESPACE = '_google_callback';
const globalContext =
window[GOOGLE_NAMESPACE] || (window[GOOGLE_NAMESPACE] = {});
globalContext[callbackId] = () => {
setLoaded(true);
};
const script = loadScript(
`https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=places&loading=async&callback=${GOOGLE_NAMESPACE}.${callbackId}`,
document.querySelector('head')!,
);
script.id = 'google-maps';
} else if ((window as any).google && !loaded) {
setLoaded(true);
}
}
useEnhancedEffect(() => {
if (!loaded) {
return undefined;
}
if (inputValue === '') {
setOptions(value ? [value] : emptyOptions);
return undefined;
}
// Allow to resolve the out of order request resolution.
let active = true;
if (!sessionToken) {
sessionToken = new (
window as any
).google.maps.places.AutocompleteSessionToken();
}
fetch({ input: inputValue, sessionToken }, (results?: readonly PlaceType[]) => {
if (!active) {
return;
}
let newOptions: readonly PlaceType[] = [];
if (results) {
newOptions = results;
if (value) {
newOptions = [
value,
...results.filter((result) => result.description !== value.description),
];
}
} else if (value) {
newOptions = [value];
}
setOptions(newOptions);
});
return () => {
active = false;
};
}, [value, inputValue, loaded]);
return (
<Autocomplete
sx={{ width: 300 }}
getOptionLabel={(option) =>
typeof option === 'string' ? option : option.description
}
filterOptions={(x) => x}
slots={{
paper: CustomPaper,
}}
options={options}
autoComplete
includeInputInList
filterSelectedOptions
resetHighlightOnMouseLeave
value={value}
noOptionsText="No locations"
onChange={(event: any, newValue: PlaceType | null) => {
setOptions(newValue ? [newValue, ...options] : options);
setValue(newValue);
}}
onInputChange={(event, newInputValue) => {
setInputValue(newInputValue);
}}
renderInput={(params) => (
<TextField {...params} label="Add a location" fullWidth />
)}
renderOption={(props, option) => {
const { key, ...optionProps } = props;
const matches = option.structured_formatting.main_text_matched_substrings;
const parts = parse(
option.structured_formatting.main_text,
matches.map((match: any) => [match.offset, match.offset + match.length]),
);
return (
<li key={key} {...optionProps}>
<Grid container sx={{ alignItems: 'center' }}>
<Grid sx={{ display: 'flex', width: 44 }}>
<LocationOnIcon sx={{ color: 'text.secondary' }} />
</Grid>
<Grid sx={{ width: 'calc(100% - 44px)', wordWrap: 'break-word' }}>
{parts.map((part, index) => (
<Box
key={index}
component="span"
sx={{
fontWeight: part.highlight
? 'fontWeightBold'
: 'fontWeightRegular',
}}
>
{part.text}
</Box>
))}
{option.structured_formatting.secondary_text ? (
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{option.structured_formatting.secondary_text}
</Typography>
) : null}
</Grid>
</Grid>
</li>
);
}}
/>
);
}
// Fake data in case Google Maps Places API returns a rate limit.
const fakeAnswer = {
p: [
{
description: 'Portugal',
structured_formatting: {
main_text: 'Portugal',
main_text_matched_substrings: [{ offset: 0, length: 1 }],
},
},
{
description: 'Puerto Rico',
structured_formatting: {
main_text: 'Puerto Rico',
main_text_matched_substrings: [{ offset: 0, length: 1 }],
},
},
{
description: 'Pakistan',
structured_formatting: {
main_text: 'Pakistan',
main_text_matched_substrings: [{ offset: 0, length: 1 }],
},
},
{
description: 'Philippines',
structured_formatting: {
main_text: 'Philippines',
main_text_matched_substrings: [{ offset: 0, length: 1 }],
},
},
{
description: 'Paris, France',
structured_formatting: {
main_text: 'Paris',
main_text_matched_substrings: [{ offset: 0, length: 1 }],
secondary_text: 'France',
},
},
],
paris: [
{
description: 'Paris, France',
structured_formatting: {
main_text: 'Paris',
main_text_matched_substrings: [{ offset: 0, length: 5 }],
secondary_text: 'France',
},
},
{
description: 'Paris, TX, USA',
structured_formatting: {
main_text: 'Paris',
main_text_matched_substrings: [{ offset: 0, length: 5 }],
secondary_text: 'TX, USA',
},
},
{
description: "Paris Beauvais Airport, Route de l'Aéroport, Tillé, France",
structured_formatting: {
main_text: 'Paris Beauvais Airport',
main_text_matched_substrings: [{ offset: 0, length: 5 }],
secondary_text: "Route de l'Aéroport, Tillé, France",
},
},
{
description: 'Paris Las Vegas, South Las Vegas Boulevard, Las Vegas, NV, USA',
structured_formatting: {
main_text: 'Paris Las Vegas',
main_text_matched_substrings: [{ offset: 0, length: 5 }],
secondary_text: 'South Las Vegas Boulevard, Las Vegas, NV, USA',
},
},
{
description: "Paris La Défense Arena, Jardin de l'Arche, Nanterre, France",
structured_formatting: {
main_text: 'Paris La Défense Arena',
main_text_matched_substrings: [{ offset: 0, length: 5 }],
secondary_text: "Jardin de l'Arche, Nanterre, France",
},
},
],
};
The demo relies on autosuggest-highlight, a small (1 kB) utility for highlighting text in autosuggest and autocomplete components.
Infinite loading
This demo uses @tanstack/react-query to additively fetch new data onto existing options upon reaching the end of the current list. The list is virtualized using @tanstack/react-virtual.
import * as React from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import CircularProgress from '@mui/material/CircularProgress';
import TextField from '@mui/material/TextField';
import {
QueryClient,
QueryClientProvider,
useInfiniteQuery,
} from '@tanstack/react-query';
import { useEventCallback, useForkRef } from '@mui/material/utils';
import useTimeout from '@mui/utils/useTimeout';
import { useVirtualizer } from '@tanstack/react-virtual';
import type { Virtualizer } from '@tanstack/react-virtual';
import { fetchMovies, getMovieLabel, normalizeMovieQuery } from './server';
import type { Movie } from './movies';
const ITEM_HEIGHT_PX = 36;
const MAX_LISTBOX_HEIGHT_PX = 8 * ITEM_HEIGHT_PX;
const OVERSCAN = 5;
const PREFETCH_WITHIN_ITEMS = 5;
const INPUT_DEBOUNCE_MS = 200;
// Autocomplete invokes `renderOption(props, option)` for every option that
// would be rendered. Returning this tuple lets the virtual listbox own layout
// and mount only the rows that are visible.
type OptionTuple = readonly [
React.HTMLAttributes<HTMLLIElement> & { key: React.Key },
Movie,
];
type ListboxVirtualizer = Virtualizer<HTMLUListElement, Element>;
/** Props added to the Autocomplete listbox slot for infinite loading and virtualization. */
interface VirtualListboxProps extends React.HTMLAttributes<HTMLUListElement> {
/** Called when the rendered window gets close enough to the end to load another page. */
onReachEnd: () => void;
/** Changes when the search context changes so the listbox can reset to the first row. */
resetScrollKey: string;
/** Exposes the virtualizer to the parent so keyboard navigation can scroll highlighted rows into view. */
virtualizerRef: React.MutableRefObject<ListboxVirtualizer | null>;
}
/**
* Virtualized Autocomplete listbox.
* It mounts only visible options and triggers pagination as the rendered range approaches the end.
*/
const VirtualListbox = React.forwardRef<HTMLUListElement, VirtualListboxProps>(
function VirtualListbox(props, forwardedRef) {
const {
children,
onReachEnd,
resetScrollKey,
virtualizerRef,
style,
...listboxProps
} = props;
const items = children as OptionTuple[];
// One DOM node must serve both Autocomplete's listbox ref and the virtualizer's
// scroll observer, so merge the forwarded ref with the local ref.
const scrollContainerRef = React.useRef<HTMLUListElement | null>(null);
const setScrollContainerRef = useForkRef(scrollContainerRef, forwardedRef);
const virtualizer = useVirtualizer({
count: items.length,
getScrollElement: () => scrollContainerRef.current,
estimateSize: () => ITEM_HEIGHT_PX,
overscan: OVERSCAN,
// Avoids forcing synchronous updates while Autocomplete is rendering.
useFlushSync: false,
});
React.useEffect(() => {
virtualizerRef.current = virtualizer;
return () => {
if (virtualizerRef.current === virtualizer) {
virtualizerRef.current = null;
}
};
}, [virtualizer, virtualizerRef]);
React.useEffect(() => {
scrollContainerRef.current?.scrollTo({ top: 0 });
virtualizer.scrollToOffset(0);
}, [resetScrollKey, virtualizer]);
const virtualItems = virtualizer.getVirtualItems();
const lastRenderedIndex = virtualItems[virtualItems.length - 1]?.index ?? -1;
// Trigger pagination from the virtualizer's rendered range, not raw scroll
// offsets, so overscan and keyboard scrolling behave consistently.
React.useEffect(() => {
if (
items.length > 0 &&
lastRenderedIndex >= items.length - PREFETCH_WITHIN_ITEMS
) {
onReachEnd();
}
}, [lastRenderedIndex, items.length, onReachEnd]);
return (
<ul
ref={setScrollContainerRef}
{...listboxProps}
style={{
...style,
boxSizing: 'border-box',
maxHeight: MAX_LISTBOX_HEIGHT_PX,
overflow: 'auto',
paddingBlock: 0,
paddingInline: 0,
margin: 0,
position: 'relative',
listStyle: 'none',
}}
>
{/* This spacer gives the <ul> its scroll height without nesting a div inside the listbox. */}
<li
aria-hidden
role="presentation"
style={{
height: virtualizer.getTotalSize(),
pointerEvents: 'none',
}}
/>
{virtualItems.map((virtualItem) => {
const [optionProps, option] = items[virtualItem.index];
const { key, style: optionStyle, ...htmlProps } = optionProps;
const label = getMovieLabel(option);
return (
<li
key={key}
{...htmlProps}
style={{
...optionStyle,
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: virtualItem.size,
transform: `translateY(${virtualItem.start}px)`,
}}
>
<span
title={label}
style={{
display: 'block',
flexGrow: 1,
minWidth: 0,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}}
>
{label}
</span>
</li>
);
})}
</ul>
);
},
);
function InfiniteQueryAutocomplete() {
const [open, setOpen] = React.useState(false);
const [value, setValue] = React.useState<Movie | null>(null);
const [inputValue, setInputValue] = React.useState('');
const [searchInputValue, setSearchInputValue] = React.useState('');
const [queryInputValue, setQueryInputValue] = React.useState('');
const virtualizerRef = React.useRef<ListboxVirtualizer | null>(null);
const wasOpenRef = React.useRef(false);
const queryDebounce = useTimeout();
React.useEffect(() => {
// Opening the popup should query for whatever text is already visible in the
// input, but reopening should not retrigger this sync while it is already open.
if (open && !wasOpenRef.current) {
setSearchInputValue(inputValue);
setQueryInputValue(inputValue);
}
wasOpenRef.current = open;
}, [inputValue, open]);
React.useEffect(() => {
if (!open || searchInputValue === queryInputValue) {
queryDebounce.clear();
return undefined;
}
queryDebounce.start(INPUT_DEBOUNCE_MS, () => {
setQueryInputValue(searchInputValue);
});
return queryDebounce.clear;
}, [open, queryDebounce, queryInputValue, searchInputValue]);
const normalizedQuery = React.useMemo(
() => normalizeMovieQuery(queryInputValue),
[queryInputValue],
);
const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
useInfiniteQuery({
queryKey: ['movies', normalizedQuery],
queryFn: ({ pageParam, signal }) =>
fetchMovies(normalizedQuery, pageParam, signal),
initialPageParam: 0,
getNextPageParam: (lastPage) => lastPage.nextPage,
enabled: open,
});
const options = React.useMemo(
() => data?.pages.flatMap((page) => page.items) ?? [],
[data],
);
const optionIndexMap = React.useMemo(() => {
const indexMap = new Map<number, number>();
options.forEach((option, index) => {
indexMap.set(option.id, index);
});
return indexMap;
}, [options]);
const handleReachEnd = useEventCallback(() => {
if (hasNextPage && !isFetchingNextPage) {
fetchNextPage();
}
});
const handleInputChange = useEventCallback(
(
_event: React.SyntheticEvent,
newInputValue: string,
reason: 'input' | 'reset' | 'clear' | 'blur' | 'selectOption' | 'removeOption',
) => {
setInputValue(newInputValue);
// Autocomplete also calls `onInputChange` for selection and blur resets.
// Only real typing should advance the remote query.
if (reason === 'input') {
setSearchInputValue(newInputValue);
}
if (reason === 'clear') {
setSearchInputValue(newInputValue);
setQueryInputValue(newInputValue);
}
},
);
const handleHighlightChange = useEventCallback(
(_event: React.SyntheticEvent, option: Movie | null) => {
const virtualizer = virtualizerRef.current;
if (!option || !virtualizer) {
return;
}
// Keep keyboard navigation aligned with virtualization. Autocomplete can
// highlight rows that are not mounted, so its default scrollIntoView would
// otherwise no-op for off-screen options.
const index = optionIndexMap.get(option.id);
if (index !== undefined) {
virtualizer.scrollToIndex(index, { align: 'auto' });
}
},
);
// The listbox scrolls back to the top when the popup opens or the search
// query changes, matching what users expect from a newly loaded result set.
const listboxResetKey = open ? normalizedQuery : `closed:${normalizedQuery}`;
return (
<Autocomplete<Movie>
sx={{ width: 320 }}
open={open}
onOpen={() => setOpen(true)}
onClose={() => setOpen(false)}
options={options}
value={value}
onChange={(_event, newValue) => setValue(newValue)}
inputValue={inputValue}
onInputChange={handleInputChange}
// Results are already filtered by the query key, so disable the built-in
// client filter.
filterOptions={(x) => x}
getOptionLabel={getMovieLabel}
isOptionEqualToValue={(option, candidate) => option.id === candidate.id}
loading={isFetching}
loadingText="Loading movies…"
disableListWrap
onHighlightChange={handleHighlightChange}
renderOption={(optionProps, option) =>
[optionProps, option] as unknown as React.ReactNode
}
renderInput={(params) => {
const { endAdornment, ...inputSlotProps } = params.slotProps.input;
return (
<TextField
{...params}
label="Movie"
slotProps={{
...params.slotProps,
input: {
...inputSlotProps,
endAdornment: (
<React.Fragment>
{isFetching ? (
<CircularProgress color="inherit" size={18} />
) : null}
{endAdornment}
</React.Fragment>
),
},
}}
/>
);
}}
slotProps={{
// The cast is only for the extra props injected into this custom slot.
listbox: {
component: VirtualListbox,
onReachEnd: handleReachEnd,
resetScrollKey: listboxResetKey,
virtualizerRef,
} as any,
}}
/>
);
}
const queryClientOptions = {
defaultOptions: {
queries: {
staleTime: 60_000,
refetchOnWindowFocus: false,
},
},
};
export default function InfiniteLoading() {
// Create the QueryClient once for this mounted demo. In an app, this usually
// lives near the root alongside the rest of your data-fetching setup.
const [queryClient] = React.useState(() => new QueryClient(queryClientOptions));
return (
<QueryClientProvider client={queryClient}>
<InfiniteQueryAutocomplete />
</QueryClientProvider>
);
}
Single value rendering
By default (when multiple={false}), the selected option is displayed as plain text inside the input.
The renderValue prop allows you to customize how the selected value is rendered.
This can be useful for adding custom styles, displaying additional information, or formatting the value differently.
- The
getItemPropsgetter provides props likedata-item-index,disabled,tabIndexand others. These props should be spread onto the rendered component for proper accessibility. - If using a custom component other than a Material UI Chip, destructure the
onDeleteprop as it's specific to the Material UI Chip.
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';
export default function CustomSingleValueRendering() {
return (
<Stack spacing={3} sx={{ width: 500 }}>
<Autocomplete
options={top100Films}
getOptionLabel={(option) => option.title}
renderValue={(value, getItemProps) => (
<Chip label={value.title} {...getItemProps()} />
)}
renderInput={(params) => <TextField {...params} label="Movie" />}
/>
<Autocomplete
options={top100Films.map((option) => option.title)}
freeSolo
renderValue={(value, getItemProps) => (
<Chip label={value} {...getItemProps()} />
)}
renderInput={(params) => <TextField {...params} label="freeSolo" />}
/>
</Stack>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
];
Multiple values
When multiple={true}, the user can select multiple values. These selected values, referred to as "items" can be customized using the renderValue prop.
- The
getItemPropsgetter supplies essential props likedata-item-index,disabled,tabIndexand others. Make sure to spread them on each rendered item. - If using a custom component other than a Material UI Chip, destructure the
onDeleteprop as it's specific to the Material UI Chip.
Inception
Inception
Inception
Forrest Gump
Inception
import Chip from '@mui/material/Chip';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
export default function Tags() {
return (
<Stack spacing={3} sx={{ width: 500 }}>
<Autocomplete
multiple
id="tags-standard"
options={top100Films}
getOptionLabel={(option) => option.title}
defaultValue={[top100Films[13]]}
renderInput={(params) => (
<TextField
{...params}
variant="standard"
label="Multiple values"
placeholder="Favorites"
/>
)}
/>
<Autocomplete
multiple
id="tags-outlined"
options={top100Films}
getOptionLabel={(option) => option.title}
defaultValue={[top100Films[13]]}
filterSelectedOptions
renderInput={(params) => (
<TextField
{...params}
label="filterSelectedOptions"
placeholder="Favorites"
/>
)}
/>
<Autocomplete
multiple
id="tags-filled"
options={top100Films.map((option) => option.title)}
defaultValue={[top100Films[13].title]}
freeSolo
renderValue={(value: readonly string[], getItemProps) =>
value.map((option: string, index: number) => {
const { key, ...itemProps } = getItemProps({ index });
return (
<Chip variant="outlined" label={option} key={key} {...itemProps} />
);
})
}
renderInput={(params) => (
<TextField
{...params}
variant="filled"
label="freeSolo"
placeholder="Favorites"
/>
)}
/>
<Autocomplete
multiple
id="tags-readOnly"
options={top100Films.map((option) => option.title)}
defaultValue={[top100Films[12].title, top100Films[13].title]}
readOnly
renderInput={(params) => (
<TextField {...params} label="readOnly" placeholder="Favorites" />
)}
/>
</Stack>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
Fixed options
In the event that you need to lock certain tags so that they can't be removed, you can set the chips disabled.
Pulp Fiction
Inception
import * as React from 'react';
import Chip from '@mui/material/Chip';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
export default function FixedTags() {
const fixedOptions = [top100Films[6]];
const [value, setValue] = React.useState([...fixedOptions, top100Films[13]]);
return (
<Autocomplete
multiple
id="fixed-tags-demo"
value={value}
onChange={(event, newValue) => {
setValue([
...fixedOptions,
...newValue.filter((option) => !fixedOptions.includes(option)),
]);
}}
options={top100Films}
getOptionLabel={(option) => option.title}
renderValue={(values, getItemProps) =>
values.map((option, index) => {
const { key, ...itemProps } = getItemProps({ index });
return (
<Chip
key={key}
label={option.title}
{...itemProps}
disabled={fixedOptions.includes(option)}
/>
);
})
}
style={{ width: 500 }}
renderInput={(params) => (
<TextField {...params} label="Fixed tag" placeholder="Favorites" />
)}
/>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
Selection indicators
This example demonstrates how icons are used to indicate the selection state of each item in the listbox.
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
import CheckBoxIcon from '@mui/icons-material/CheckBox';
export default function CheckboxesTags() {
return (
<Autocomplete
multiple
id="checkboxes-tags-demo"
options={top100Films}
disableCloseOnSelect
getOptionLabel={(option) => option.title}
renderOption={(props, option, { selected }) => {
const { key, ...optionProps } = props;
const SelectionIcon = selected ? CheckBoxIcon : CheckBoxOutlineBlankIcon;
return (
<li key={key} {...optionProps}>
<SelectionIcon
fontSize="small"
style={{ marginRight: 8, padding: 9, boxSizing: 'content-box' }}
/>
{option.title}
</li>
);
}}
style={{ width: 500 }}
renderInput={(params) => (
<TextField {...params} label="Checkboxes" placeholder="Favorites" />
)}
/>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
];
Limit tags
You can use the limitTags prop to limit the number of displayed options when not focused.
Inception
Forrest Gump
+1import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
export default function LimitTags() {
return (
<Autocomplete
multiple
limitTags={2}
id="multiple-limit-tags"
options={top100Films}
getOptionLabel={(option) => option.title}
defaultValue={[top100Films[13], top100Films[12], top100Films[11]]}
renderInput={(params) => (
<TextField {...params} label="limitTags" placeholder="Favorites" />
)}
sx={{ width: '500px' }}
/>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
Sizes
Fancy smaller inputs? Use the size prop.
Inception
Inception
Inception
import Stack from '@mui/material/Stack';
import Chip from '@mui/material/Chip';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
export default function Sizes() {
return (
<Stack spacing={2} sx={{ width: 500 }}>
<Autocomplete
id="size-small-standard"
size="small"
options={top100Films}
getOptionLabel={(option) => option.title}
defaultValue={top100Films[13]}
renderInput={(params) => (
<TextField
{...params}
variant="standard"
label="Size small"
placeholder="Favorites"
/>
)}
/>
<Autocomplete
multiple
id="size-small-standard-multi"
size="small"
options={top100Films}
getOptionLabel={(option) => option.title}
defaultValue={[top100Films[13]]}
renderInput={(params) => (
<TextField
{...params}
variant="standard"
label="Size small"
placeholder="Favorites"
/>
)}
/>
<Autocomplete
id="size-small-outlined"
size="small"
options={top100Films}
getOptionLabel={(option) => option.title}
defaultValue={top100Films[13]}
renderInput={(params) => (
<TextField {...params} label="Size small" placeholder="Favorites" />
)}
/>
<Autocomplete
multiple
id="size-small-outlined-multi"
size="small"
options={top100Films}
getOptionLabel={(option) => option.title}
defaultValue={[top100Films[13]]}
renderInput={(params) => (
<TextField {...params} label="Size small" placeholder="Favorites" />
)}
/>
<Autocomplete
id="size-small-filled"
size="small"
options={top100Films}
getOptionLabel={(option) => option.title}
defaultValue={top100Films[13]}
renderInput={(params) => (
<TextField
{...params}
variant="filled"
label="Size small"
placeholder="Favorites"
/>
)}
/>
<Autocomplete
multiple
id="size-small-filled-multi"
size="small"
options={top100Films}
getOptionLabel={(option) => option.title}
defaultValue={[top100Films[13]]}
renderValue={(values, getItemProps) =>
values.map((option, index) => {
const { key, ...itemProps } = getItemProps({ index });
return (
<Chip
key={key}
variant="outlined"
label={option.title}
size="small"
{...itemProps}
/>
);
})
}
renderInput={(params) => (
<TextField
{...params}
variant="filled"
label="Size small"
placeholder="Favorites"
/>
)}
/>
</Stack>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
Customization
Custom input
The renderInput prop allows you to customize the rendered input.
The first argument of this render prop contains props that you need to forward.
Pay specific attention to the ref and inputProps keys.
import Autocomplete from '@mui/material/Autocomplete';
const options = ['Option 1', 'Option 2'];
export default function CustomInputAutocomplete() {
return (
<label>
Value:{' '}
<Autocomplete
sx={(theme) => ({
display: 'inline-block',
'& input': {
width: 200,
bgcolor: 'background.paper',
color: theme.palette.getContrastText(theme.palette.background.paper),
},
})}
id="custom-input-demo"
options={options}
renderInput={(params) => (
<div ref={params.slotProps.input.ref}>
<input type="text" {...params.slotProps.htmlInput} />
</div>
)}
/>
</label>
);
}
Globally customized options
To globally customize the Autocomplete options for all components in your app,
you can use the theme default props and set the renderOption property in the defaultProps key.
The renderOption property takes the ownerState as the fourth parameter, which includes props and internal component state.
To display the label, you can use the getOptionLabel prop from the ownerState.
This approach enables different options for each Autocomplete component while keeping the options styling consistent.
import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import { createTheme, useTheme, ThemeProvider } from '@mui/material/styles';
import type { Theme } from '@mui/material/styles';
// Theme.ts
const customTheme = (outerTheme: Theme) =>
createTheme({
cssVariables: {
colorSchemeSelector: 'class',
},
palette: {
mode: outerTheme.palette.mode,
},
components: {
MuiAutocomplete: {
defaultProps: {
renderOption: (props, option, state, ownerState) => {
const { key, ...optionProps } = props;
return (
<Box
key={key}
sx={{
borderRadius: '8px',
margin: '5px',
[`&.${autocompleteClasses.option}`]: {
padding: '8px',
},
}}
component="li"
{...optionProps}
>
{ownerState.getOptionLabel(option)}
</Box>
);
},
},
},
},
});
export default function GloballyCustomizedOptions() {
// useTheme is used to determine the dark or light mode of the docs to maintain the Autocomplete component default styles.
const outerTheme = useTheme();
return (
<ThemeProvider theme={customTheme(outerTheme)}>
<Stack spacing={5} sx={{ width: 300 }}>
<MovieSelect />
<CountrySelect />
</Stack>
</ThemeProvider>
);
}
function MovieSelect() {
return (
<Autocomplete
options={top100Films}
getOptionLabel={(option: FilmOptionType) => `${option.title} (${option.year})`}
id="movie-customized-option-demo"
disableCloseOnSelect
renderInput={(params) => (
<TextField {...params} label="Choose a movie" variant="standard" />
)}
/>
);
}
function CountrySelect() {
return (
<Autocomplete
options={countries}
disableCloseOnSelect
getOptionLabel={(option: CountryType) =>
`${option.label} (${option.code}) +${option.phone}`
}
renderInput={(params) => <TextField {...params} label="Choose a country" />}
/>
);
}
interface CountryType {
code: string;
label: string;
phone: string;
suggested?: boolean;
}
// From https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js
const countries: readonly CountryType[] = [
{ code: 'AD', label: 'Andorra', phone: '376' },
{
code: 'AE',
label: 'United Arab Emirates',
phone: '971',
},
{ code: 'AF', label: 'Afghanistan', phone: '93' },
{
code: 'AG',
label: 'Antigua and Barbuda',
phone: '1-268',
},
{ code: 'AI', label: 'Anguilla', phone: '1-264' },
{ code: 'AL', label: 'Albania', phone: '355' },
{ code: 'AM', label: 'Armenia', phone: '374' },
{ code: 'AO', label: 'Angola', phone: '244' },
{ code: 'AQ', label: 'Antarctica', phone: '672' },
{ code: 'AR', label: 'Argentina', phone: '54' },
{ code: 'AS', label: 'American Samoa', phone: '1-684' },
{ code: 'AT', label: 'Austria', phone: '43' },
{
code: 'AU',
label: 'Australia',
phone: '61',
suggested: true,
},
{ code: 'AW', label: 'Aruba', phone: '297' },
{ code: 'AX', label: 'Alland Islands', phone: '358' },
{ code: 'AZ', label: 'Azerbaijan', phone: '994' },
{
code: 'BA',
label: 'Bosnia and Herzegovina',
phone: '387',
},
{ code: 'BB', label: 'Barbados', phone: '1-246' },
{ code: 'BD', label: 'Bangladesh', phone: '880' },
{ code: 'BE', label: 'Belgium', phone: '32' },
{ code: 'BF', label: 'Burkina Faso', phone: '226' },
{ code: 'BG', label: 'Bulgaria', phone: '359' },
{ code: 'BH', label: 'Bahrain', phone: '973' },
{ code: 'BI', label: 'Burundi', phone: '257' },
{ code: 'BJ', label: 'Benin', phone: '229' },
{ code: 'BL', label: 'Saint Barthelemy', phone: '590' },
{ code: 'BM', label: 'Bermuda', phone: '1-441' },
{ code: 'BN', label: 'Brunei Darussalam', phone: '673' },
{ code: 'BO', label: 'Bolivia', phone: '591' },
{ code: 'BR', label: 'Brazil', phone: '55' },
{ code: 'BS', label: 'Bahamas', phone: '1-242' },
{ code: 'BT', label: 'Bhutan', phone: '975' },
{ code: 'BV', label: 'Bouvet Island', phone: '47' },
{ code: 'BW', label: 'Botswana', phone: '267' },
{ code: 'BY', label: 'Belarus', phone: '375' },
{ code: 'BZ', label: 'Belize', phone: '501' },
{
code: 'CA',
label: 'Canada',
phone: '1',
suggested: true,
},
{
code: 'CC',
label: 'Cocos (Keeling) Islands',
phone: '61',
},
{
code: 'CD',
label: 'Congo, Democratic Republic of the',
phone: '243',
},
{
code: 'CF',
label: 'Central African Republic',
phone: '236',
},
{
code: 'CG',
label: 'Congo, Republic of the',
phone: '242',
},
{ code: 'CH', label: 'Switzerland', phone: '41' },
{ code: 'CI', label: "Cote d'Ivoire", phone: '225' },
{ code: 'CK', label: 'Cook Islands', phone: '682' },
{ code: 'CL', label: 'Chile', phone: '56' },
{ code: 'CM', label: 'Cameroon', phone: '237' },
{ code: 'CN', label: 'China', phone: '86' },
{ code: 'CO', label: 'Colombia', phone: '57' },
{ code: 'CR', label: 'Costa Rica', phone: '506' },
{ code: 'CU', label: 'Cuba', phone: '53' },
{ code: 'CV', label: 'Cape Verde', phone: '238' },
{ code: 'CW', label: 'Curacao', phone: '599' },
{ code: 'CX', label: 'Christmas Island', phone: '61' },
{ code: 'CY', label: 'Cyprus', phone: '357' },
{ code: 'CZ', label: 'Czech Republic', phone: '420' },
{
code: 'DE',
label: 'Germany',
phone: '49',
suggested: true,
},
{ code: 'DJ', label: 'Djibouti', phone: '253' },
{ code: 'DK', label: 'Denmark', phone: '45' },
{ code: 'DM', label: 'Dominica', phone: '1-767' },
{
code: 'DO',
label: 'Dominican Republic',
phone: '1-809',
},
{ code: 'DZ', label: 'Algeria', phone: '213' },
{ code: 'EC', label: 'Ecuador', phone: '593' },
{ code: 'EE', label: 'Estonia', phone: '372' },
{ code: 'EG', label: 'Egypt', phone: '20' },
{ code: 'EH', label: 'Western Sahara', phone: '212' },
{ code: 'ER', label: 'Eritrea', phone: '291' },
{ code: 'ES', label: 'Spain', phone: '34' },
{ code: 'ET', label: 'Ethiopia', phone: '251' },
{ code: 'FI', label: 'Finland', phone: '358' },
{ code: 'FJ', label: 'Fiji', phone: '679' },
{
code: 'FK',
label: 'Falkland Islands (Malvinas)',
phone: '500',
},
{
code: 'FM',
label: 'Micronesia, Federated States of',
phone: '691',
},
{ code: 'FO', label: 'Faroe Islands', phone: '298' },
{
code: 'FR',
label: 'France',
phone: '33',
suggested: true,
},
{ code: 'GA', label: 'Gabon', phone: '241' },
{ code: 'GB', label: 'United Kingdom', phone: '44' },
{ code: 'GD', label: 'Grenada', phone: '1-473' },
{ code: 'GE', label: 'Georgia', phone: '995' },
{ code: 'GF', label: 'French Guiana', phone: '594' },
{ code: 'GG', label: 'Guernsey', phone: '44' },
{ code: 'GH', label: 'Ghana', phone: '233' },
{ code: 'GI', label: 'Gibraltar', phone: '350' },
{ code: 'GL', label: 'Greenland', phone: '299' },
{ code: 'GM', label: 'Gambia', phone: '220' },
{ code: 'GN', label: 'Guinea', phone: '224' },
{ code: 'GP', label: 'Guadeloupe', phone: '590' },
{ code: 'GQ', label: 'Equatorial Guinea', phone: '240' },
{ code: 'GR', label: 'Greece', phone: '30' },
{
code: 'GS',
label: 'South Georgia and the South Sandwich Islands',
phone: '500',
},
{ code: 'GT', label: 'Guatemala', phone: '502' },
{ code: 'GU', label: 'Guam', phone: '1-671' },
{ code: 'GW', label: 'Guinea-Bissau', phone: '245' },
{ code: 'GY', label: 'Guyana', phone: '592' },
{ code: 'HK', label: 'Hong Kong', phone: '852' },
{
code: 'HM',
label: 'Heard Island and McDonald Islands',
phone: '672',
},
{ code: 'HN', label: 'Honduras', phone: '504' },
{ code: 'HR', label: 'Croatia', phone: '385' },
{ code: 'HT', label: 'Haiti', phone: '509' },
{ code: 'HU', label: 'Hungary', phone: '36' },
{ code: 'ID', label: 'Indonesia', phone: '62' },
{ code: 'IE', label: 'Ireland', phone: '353' },
{ code: 'IL', label: 'Israel', phone: '972' },
{ code: 'IM', label: 'Isle of Man', phone: '44' },
{ code: 'IN', label: 'India', phone: '91' },
{
code: 'IO',
label: 'British Indian Ocean Territory',
phone: '246',
},
{ code: 'IQ', label: 'Iraq', phone: '964' },
{
code: 'IR',
label: 'Iran, Islamic Republic of',
phone: '98',
},
{ code: 'IS', label: 'Iceland', phone: '354' },
{ code: 'IT', label: 'Italy', phone: '39' },
{ code: 'JE', label: 'Jersey', phone: '44' },
{ code: 'JM', label: 'Jamaica', phone: '1-876' },
{ code: 'JO', label: 'Jordan', phone: '962' },
{
code: 'JP',
label: 'Japan',
phone: '81',
suggested: true,
},
{ code: 'KE', label: 'Kenya', phone: '254' },
{ code: 'KG', label: 'Kyrgyzstan', phone: '996' },
{ code: 'KH', label: 'Cambodia', phone: '855' },
{ code: 'KI', label: 'Kiribati', phone: '686' },
{ code: 'KM', label: 'Comoros', phone: '269' },
{
code: 'KN',
label: 'Saint Kitts and Nevis',
phone: '1-869',
},
{
code: 'KP',
label: "Korea, Democratic People's Republic of",
phone: '850',
},
{ code: 'KR', label: 'Korea, Republic of', phone: '82' },
{ code: 'KW', label: 'Kuwait', phone: '965' },
{ code: 'KY', label: 'Cayman Islands', phone: '1-345' },
{ code: 'KZ', label: 'Kazakhstan', phone: '7' },
{
code: 'LA',
label: "Lao People's Democratic Republic",
phone: '856',
},
{ code: 'LB', label: 'Lebanon', phone: '961' },
{ code: 'LC', label: 'Saint Lucia', phone: '1-758' },
{ code: 'LI', label: 'Liechtenstein', phone: '423' },
{ code: 'LK', label: 'Sri Lanka', phone: '94' },
{ code: 'LR', label: 'Liberia', phone: '231' },
{ code: 'LS', label: 'Lesotho', phone: '266' },
{ code: 'LT', label: 'Lithuania', phone: '370' },
{ code: 'LU', label: 'Luxembourg', phone: '352' },
{ code: 'LV', label: 'Latvia', phone: '371' },
{ code: 'LY', label: 'Libya', phone: '218' },
{ code: 'MA', label: 'Morocco', phone: '212' },
{ code: 'MC', label: 'Monaco', phone: '377' },
{
code: 'MD',
label: 'Moldova, Republic of',
phone: '373',
},
{ code: 'ME', label: 'Montenegro', phone: '382' },
{
code: 'MF',
label: 'Saint Martin (French part)',
phone: '590',
},
{ code: 'MG', label: 'Madagascar', phone: '261' },
{ code: 'MH', label: 'Marshall Islands', phone: '692' },
{
code: 'MK',
label: 'Macedonia, the Former Yugoslav Republic of',
phone: '389',
},
{ code: 'ML', label: 'Mali', phone: '223' },
{ code: 'MM', label: 'Myanmar', phone: '95' },
{ code: 'MN', label: 'Mongolia', phone: '976' },
{ code: 'MO', label: 'Macao', phone: '853' },
{
code: 'MP',
label: 'Northern Mariana Islands',
phone: '1-670',
},
{ code: 'MQ', label: 'Martinique', phone: '596' },
{ code: 'MR', label: 'Mauritania', phone: '222' },
{ code: 'MS', label: 'Montserrat', phone: '1-664' },
{ code: 'MT', label: 'Malta', phone: '356' },
{ code: 'MU', label: 'Mauritius', phone: '230' },
{ code: 'MV', label: 'Maldives', phone: '960' },
{ code: 'MW', label: 'Malawi', phone: '265' },
{ code: 'MX', label: 'Mexico', phone: '52' },
{ code: 'MY', label: 'Malaysia', phone: '60' },
{ code: 'MZ', label: 'Mozambique', phone: '258' },
{ code: 'NA', label: 'Namibia', phone: '264' },
{ code: 'NC', label: 'New Caledonia', phone: '687' },
{ code: 'NE', label: 'Niger', phone: '227' },
{ code: 'NF', label: 'Norfolk Island', phone: '672' },
{ code: 'NG', label: 'Nigeria', phone: '234' },
{ code: 'NI', label: 'Nicaragua', phone: '505' },
{ code: 'NL', label: 'Netherlands', phone: '31' },
{ code: 'NO', label: 'Norway', phone: '47' },
{ code: 'NP', label: 'Nepal', phone: '977' },
{ code: 'NR', label: 'Nauru', phone: '674' },
{ code: 'NU', label: 'Niue', phone: '683' },
{ code: 'NZ', label: 'New Zealand', phone: '64' },
{ code: 'OM', label: 'Oman', phone: '968' },
{ code: 'PA', label: 'Panama', phone: '507' },
{ code: 'PE', label: 'Peru', phone: '51' },
{ code: 'PF', label: 'French Polynesia', phone: '689' },
{ code: 'PG', label: 'Papua New Guinea', phone: '675' },
{ code: 'PH', label: 'Philippines', phone: '63' },
{ code: 'PK', label: 'Pakistan', phone: '92' },
{ code: 'PL', label: 'Poland', phone: '48' },
{
code: 'PM',
label: 'Saint Pierre and Miquelon',
phone: '508',
},
{ code: 'PN', label: 'Pitcairn', phone: '870' },
{ code: 'PR', label: 'Puerto Rico', phone: '1' },
{
code: 'PS',
label: 'Palestine, State of',
phone: '970',
},
{ code: 'PT', label: 'Portugal', phone: '351' },
{ code: 'PW', label: 'Palau', phone: '680' },
{ code: 'PY', label: 'Paraguay', phone: '595' },
{ code: 'QA', label: 'Qatar', phone: '974' },
{ code: 'RE', label: 'Reunion', phone: '262' },
{ code: 'RO', label: 'Romania', phone: '40' },
{ code: 'RS', label: 'Serbia', phone: '381' },
{ code: 'RU', label: 'Russian Federation', phone: '7' },
{ code: 'RW', label: 'Rwanda', phone: '250' },
{ code: 'SA', label: 'Saudi Arabia', phone: '966' },
{ code: 'SB', label: 'Solomon Islands', phone: '677' },
{ code: 'SC', label: 'Seychelles', phone: '248' },
{ code: 'SD', label: 'Sudan', phone: '249' },
{ code: 'SE', label: 'Sweden', phone: '46' },
{ code: 'SG', label: 'Singapore', phone: '65' },
{ code: 'SH', label: 'Saint Helena', phone: '290' },
{ code: 'SI', label: 'Slovenia', phone: '386' },
{
code: 'SJ',
label: 'Svalbard and Jan Mayen',
phone: '47',
},
{ code: 'SK', label: 'Slovakia', phone: '421' },
{ code: 'SL', label: 'Sierra Leone', phone: '232' },
{ code: 'SM', label: 'San Marino', phone: '378' },
{ code: 'SN', label: 'Senegal', phone: '221' },
{ code: 'SO', label: 'Somalia', phone: '252' },
{ code: 'SR', label: 'Suriname', phone: '597' },
{ code: 'SS', label: 'South Sudan', phone: '211' },
{
code: 'ST',
label: 'Sao Tome and Principe',
phone: '239',
},
{ code: 'SV', label: 'El Salvador', phone: '503' },
{
code: 'SX',
label: 'Sint Maarten (Dutch part)',
phone: '1-721',
},
{
code: 'SY',
label: 'Syrian Arab Republic',
phone: '963',
},
{ code: 'SZ', label: 'Swaziland', phone: '268' },
{
code: 'TC',
label: 'Turks and Caicos Islands',
phone: '1-649',
},
{ code: 'TD', label: 'Chad', phone: '235' },
{
code: 'TF',
label: 'French Southern Territories',
phone: '262',
},
{ code: 'TG', label: 'Togo', phone: '228' },
{ code: 'TH', label: 'Thailand', phone: '66' },
{ code: 'TJ', label: 'Tajikistan', phone: '992' },
{ code: 'TK', label: 'Tokelau', phone: '690' },
{ code: 'TL', label: 'Timor-Leste', phone: '670' },
{ code: 'TM', label: 'Turkmenistan', phone: '993' },
{ code: 'TN', label: 'Tunisia', phone: '216' },
{ code: 'TO', label: 'Tonga', phone: '676' },
{ code: 'TR', label: 'Turkey', phone: '90' },
{
code: 'TT',
label: 'Trinidad and Tobago',
phone: '1-868',
},
{ code: 'TV', label: 'Tuvalu', phone: '688' },
{
code: 'TW',
label: 'Taiwan',
phone: '886',
},
{
code: 'TZ',
label: 'United Republic of Tanzania',
phone: '255',
},
{ code: 'UA', label: 'Ukraine', phone: '380' },
{ code: 'UG', label: 'Uganda', phone: '256' },
{
code: 'US',
label: 'United States',
phone: '1',
suggested: true,
},
{ code: 'UY', label: 'Uruguay', phone: '598' },
{ code: 'UZ', label: 'Uzbekistan', phone: '998' },
{
code: 'VA',
label: 'Holy See (Vatican City State)',
phone: '379',
},
{
code: 'VC',
label: 'Saint Vincent and the Grenadines',
phone: '1-784',
},
{ code: 'VE', label: 'Venezuela', phone: '58' },
{
code: 'VG',
label: 'British Virgin Islands',
phone: '1-284',
},
{
code: 'VI',
label: 'US Virgin Islands',
phone: '1-340',
},
{ code: 'VN', label: 'Vietnam', phone: '84' },
{ code: 'VU', label: 'Vanuatu', phone: '678' },
{ code: 'WF', label: 'Wallis and Futuna', phone: '681' },
{ code: 'WS', label: 'Samoa', phone: '685' },
{ code: 'XK', label: 'Kosovo', phone: '383' },
{ code: 'YE', label: 'Yemen', phone: '967' },
{ code: 'YT', label: 'Mayotte', phone: '262' },
{ code: 'ZA', label: 'South Africa', phone: '27' },
{ code: 'ZM', label: 'Zambia', phone: '260' },
{ code: 'ZW', label: 'Zimbabwe', phone: '263' },
];
interface FilmOptionType {
title: string;
year: number;
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
GitHub's picker
This demo reproduces GitHub's label picker:
help wanted
type: bug
import * as React from 'react';
import { useTheme, styled } from '@mui/material/styles';
import Popper from '@mui/material/Popper';
import ClickAwayListener from '@mui/material/ClickAwayListener';
import SettingsIcon from '@mui/icons-material/Settings';
import CloseIcon from '@mui/icons-material/Close';
import DoneIcon from '@mui/icons-material/Done';
import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
import type { AutocompleteCloseReason } from '@mui/material/Autocomplete';
import ButtonBase from '@mui/material/ButtonBase';
import InputBase from '@mui/material/InputBase';
import Box from '@mui/material/Box';
interface PopperComponentProps {
anchorEl?: any;
disablePortal?: boolean;
open: boolean;
}
const StyledAutocompletePopper = styled('div')(({ theme }) => ({
[`& .${autocompleteClasses.paper}`]: {
boxShadow: 'none',
margin: 0,
color: 'inherit',
fontSize: 13,
},
[`& .${autocompleteClasses.listbox}`]: {
padding: 0,
backgroundColor: '#fff',
...theme.applyStyles('dark', {
backgroundColor: '#1c2128',
}),
[`& .${autocompleteClasses.option}`]: {
minHeight: 'auto',
alignItems: 'flex-start',
padding: 8,
borderBottom: '1px solid #eaecef',
...theme.applyStyles('dark', {
borderBottom: '1px solid #30363d',
}),
'&[aria-selected="true"]': {
backgroundColor: 'transparent',
},
[`&.${autocompleteClasses.focused}, &.${autocompleteClasses.focused}[aria-selected="true"]`]:
{
backgroundColor: theme.palette.action.hover,
},
},
},
[`&.${autocompleteClasses.popperDisablePortal}`]: {
position: 'relative',
},
}));
function PopperComponent(props: PopperComponentProps) {
const { disablePortal, anchorEl, open, ...other } = props;
return <StyledAutocompletePopper {...other} />;
}
const StyledPopper = styled(Popper)(({ theme }) => ({
border: '1px solid #e1e4e8',
boxShadow: `0 8px 24px ${'rgba(149, 157, 165, 0.2)'}`,
color: '#24292e',
backgroundColor: '#fff',
borderRadius: 6,
width: 300,
zIndex: theme.zIndex.modal,
fontSize: 13,
...theme.applyStyles('dark', {
border: '1px solid #30363d',
boxShadow: '0 8px 24px rgb(1, 4, 9)',
color: '#c9d1d9',
backgroundColor: '#1c2128',
}),
}));
const StyledInput = styled(InputBase)(({ theme }) => ({
padding: 10,
width: '100%',
borderBottom: '1px solid #eaecef',
...theme.applyStyles('dark', {
borderBottom: '1px solid #30363d',
}),
'& input': {
borderRadius: 4,
padding: 8,
transition: theme.transitions.create(['border-color', 'box-shadow']),
fontSize: 14,
backgroundColor: '#fff',
border: '1px solid #30363d',
...theme.applyStyles('dark', {
backgroundColor: '#0d1117',
border: '1px solid #eaecef',
}),
'&:focus': {
boxShadow: '0px 0px 0px 3px rgba(3, 102, 214, 0.3)',
borderColor: '#0366d6',
...theme.applyStyles('dark', {
boxShadow: '0px 0px 0px 3px rgb(12, 45, 107)',
borderColor: '#388bfd',
}),
},
},
}));
const Button = styled(ButtonBase)(({ theme }) => ({
fontSize: 13,
width: '100%',
textAlign: 'left',
paddingBottom: 8,
fontWeight: 600,
color: '#586069',
...theme.applyStyles('dark', {
color: '#8b949e',
}),
'&:hover,&:focus': {
color: '#0366d6',
...theme.applyStyles('dark', {
color: '#58a6ff',
}),
},
'& span': {
width: '100%',
},
'& svg': {
width: 16,
height: 16,
},
}));
export default function GitHubLabel() {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const [value, setValue] = React.useState<LabelType[]>([labels[1], labels[11]]);
const [pendingValue, setPendingValue] = React.useState<LabelType[]>([]);
const theme = useTheme();
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
setPendingValue(value);
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setValue(pendingValue);
if (anchorEl) {
anchorEl.focus();
}
setAnchorEl(null);
};
const open = Boolean(anchorEl);
const id = open ? 'github-label' : undefined;
return (
<React.Fragment>
<Box sx={{ width: 221, fontSize: 13 }}>
<Button disableRipple aria-describedby={id} onClick={handleClick}>
<span>Labels</span>
<SettingsIcon />
</Button>
{value.map((label) => (
<Box
key={label.name}
sx={{
mt: '3px',
height: 20,
padding: '.15em 4px',
fontWeight: 600,
lineHeight: '15px',
borderRadius: '2px',
}}
style={{
backgroundColor: label.color,
color: theme.palette.getContrastText(label.color),
}}
>
{label.name}
</Box>
))}
</Box>
<StyledPopper id={id} open={open} anchorEl={anchorEl} placement="bottom-start">
<ClickAwayListener onClickAway={handleClose}>
<div>
<Box
sx={(t) => ({
borderBottom: '1px solid #30363d',
padding: '8px 10px',
fontWeight: 600,
...t.applyStyles('light', {
borderBottom: '1px solid #eaecef',
}),
})}
>
Apply labels to this pull request
</Box>
<Autocomplete
open
multiple
onClose={(
event: React.ChangeEvent<{}>,
reason: AutocompleteCloseReason,
) => {
if (reason === 'escape') {
handleClose();
}
}}
value={pendingValue}
onChange={(event, newValue, reason) => {
if (
event.type === 'keydown' &&
((event as React.KeyboardEvent).key === 'Backspace' ||
(event as React.KeyboardEvent).key === 'Delete') &&
reason === 'removeOption'
) {
return;
}
setPendingValue(newValue);
}}
disableCloseOnSelect
renderValue={() => null}
noOptionsText="No labels"
renderOption={(props, option, { selected }) => {
const { key, ...optionProps } = props;
return (
<li key={key} {...optionProps}>
<Box
component={DoneIcon}
sx={{ width: 17, height: 17, mr: '5px', ml: '-2px' }}
style={{
visibility: selected ? 'visible' : 'hidden',
}}
/>
<Box
component="span"
sx={{
width: 14,
height: 14,
flexShrink: 0,
borderRadius: '3px',
mr: 1,
mt: '2px',
}}
style={{ backgroundColor: option.color }}
/>
<Box
sx={(t) => ({
flexGrow: 1,
'& span': {
color: '#8b949e',
...t.applyStyles('light', {
color: '#586069',
}),
},
})}
>
{option.name}
<br />
<span>{option.description}</span>
</Box>
<Box
component={CloseIcon}
sx={{ opacity: 0.6, width: 18, height: 18 }}
style={{
visibility: selected ? 'visible' : 'hidden',
}}
/>
</li>
);
}}
options={[...labels].sort((a, b) => {
// Display the selected labels first.
let ai = value.indexOf(a);
ai = ai === -1 ? value.length + labels.indexOf(a) : ai;
let bi = value.indexOf(b);
bi = bi === -1 ? value.length + labels.indexOf(b) : bi;
return ai - bi;
})}
getOptionLabel={(option) => option.name}
renderInput={(params) => (
<StyledInput
ref={params.slotProps.input.ref}
inputProps={params.slotProps.htmlInput}
autoFocus
placeholder="Filter labels"
/>
)}
slots={{
popper: PopperComponent,
}}
/>
</div>
</ClickAwayListener>
</StyledPopper>
</React.Fragment>
);
}
interface LabelType {
name: string;
color: string;
description?: string;
}
// From https://github.com/abdonrd/github-labels
const labels = [
{
name: 'good first issue',
color: '#7057ff',
description: 'Good for newcomers',
},
{
name: 'help wanted',
color: '#008672',
description: 'Extra attention is needed',
},
{
name: 'priority: critical',
color: '#b60205',
description: '',
},
{
name: 'priority: high',
color: '#d93f0b',
description: '',
},
{
name: 'priority: low',
color: '#0e8a16',
description: '',
},
{
name: 'priority: medium',
color: '#fbca04',
description: '',
},
{
name: "status: can't reproduce",
color: '#fec1c1',
description: '',
},
{
name: 'status: confirmed',
color: '#215cea',
description: '',
},
{
name: 'status: duplicate',
color: '#cfd3d7',
description: 'This issue or pull request already exists',
},
{
name: 'status: needs information',
color: '#fef2c0',
description: '',
},
{
name: 'status: wont do/fix',
color: '#eeeeee',
description: 'This will not be worked on',
},
{
name: 'type: bug',
color: '#d73a4a',
description: "Something isn't working",
},
{
name: 'type: discussion',
color: '#d4c5f9',
description: '',
},
{
name: 'type: documentation',
color: '#006b75',
description: '',
},
{
name: 'type: enhancement',
color: '#84b6eb',
description: '',
},
{
name: 'type: epic',
color: '#3e4b9e',
description: 'A theme of work that contain sub-tasks',
},
{
name: 'type: feature request',
color: '#fbca04',
description: 'New feature or request',
},
{
name: 'type: question',
color: '#d876e3',
description: 'Further information is requested',
},
];
Head to the Customized hook section for a customization example with the useAutocomplete hook instead of the component.
Hint
The following demo shows how to add a hint feature to the Autocomplete:
import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
export default function AutocompleteHint() {
const hint = React.useRef('');
const [inputValue, setInputValue] = React.useState('');
return (
<Autocomplete
onKeyDown={(event) => {
if (event.key === 'Tab') {
if (hint.current) {
setInputValue(hint.current);
event.preventDefault();
}
}
}}
onClose={() => {
hint.current = '';
}}
onChange={(event, newValue) => {
setInputValue(newValue && newValue.label ? newValue.label : '');
}}
disablePortal
resetHighlightOnMouseLeave
inputValue={inputValue}
id="combo-box-hint-demo"
options={top100Films}
sx={{ width: 300 }}
renderInput={(params) => {
return (
<Box sx={{ position: 'relative' }}>
<Typography
sx={{
position: 'absolute',
opacity: 0.5,
left: 14,
top: 16,
overflow: 'hidden',
whiteSpace: 'nowrap',
width: 'calc(100% - 75px)', // Adjust based on padding of TextField
}}
>
{hint.current}
</Typography>
<TextField
{...params}
onChange={(event) => {
const newValue = event.target.value;
setInputValue(newValue);
const matchingOption = top100Films.find((option) =>
option.label.startsWith(newValue),
);
if (newValue && matchingOption) {
hint.current = matchingOption.label;
} else {
hint.current = '';
}
}}
label="Movie"
/>
</Box>
);
}}
/>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ label: 'The Shawshank Redemption', year: 1994 },
{ label: 'The Godfather', year: 1972 },
{ label: 'The Godfather: Part II', year: 1974 },
{ label: 'The Dark Knight', year: 2008 },
{ label: '12 Angry Men', year: 1957 },
{ label: "Schindler's List", year: 1993 },
{ label: 'Pulp Fiction', year: 1994 },
{
label: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ label: 'The Good, the Bad and the Ugly', year: 1966 },
{ label: 'Fight Club', year: 1999 },
{
label: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
label: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ label: 'Forrest Gump', year: 1994 },
{ label: 'Inception', year: 2010 },
{
label: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ label: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ label: 'Goodfellas', year: 1990 },
{ label: 'The Matrix', year: 1999 },
{ label: 'Seven Samurai', year: 1954 },
{
label: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ label: 'City of God', year: 2002 },
{ label: 'Se7en', year: 1995 },
{ label: 'The Silence of the Lambs', year: 1991 },
{ label: "It's a Wonderful Life", year: 1946 },
{ label: 'Life Is Beautiful', year: 1997 },
{ label: 'The Usual Suspects', year: 1995 },
{ label: 'Léon: The Professional', year: 1994 },
{ label: 'Spirited Away', year: 2001 },
{ label: 'Saving Private Ryan', year: 1998 },
{ label: 'Once Upon a Time in the West', year: 1968 },
{ label: 'American History X', year: 1998 },
{ label: 'Interstellar', year: 2014 },
{ label: 'Casablanca', year: 1942 },
{ label: 'City Lights', year: 1931 },
{ label: 'Psycho', year: 1960 },
{ label: 'The Green Mile', year: 1999 },
{ label: 'The Intouchables', year: 2011 },
{ label: 'Modern Times', year: 1936 },
{ label: 'Raiders of the Lost Ark', year: 1981 },
{ label: 'Rear Window', year: 1954 },
{ label: 'The Pianist', year: 2002 },
{ label: 'The Departed', year: 2006 },
{ label: 'Terminator 2: Judgment Day', year: 1991 },
{ label: 'Back to the Future', year: 1985 },
{ label: 'Whiplash', year: 2014 },
{ label: 'Gladiator', year: 2000 },
{ label: 'Memento', year: 2000 },
{ label: 'The Prestige', year: 2006 },
{ label: 'The Lion King', year: 1994 },
{ label: 'Apocalypse Now', year: 1979 },
{ label: 'Alien', year: 1979 },
{ label: 'Sunset Boulevard', year: 1950 },
{
label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ label: 'The Great Dictator', year: 1940 },
{ label: 'Cinema Paradiso', year: 1988 },
{ label: 'The Lives of Others', year: 2006 },
{ label: 'Grave of the Fireflies', year: 1988 },
{ label: 'Paths of Glory', year: 1957 },
{ label: 'Django Unchained', year: 2012 },
{ label: 'The Shining', year: 1980 },
{ label: 'WALL·E', year: 2008 },
{ label: 'American Beauty', year: 1999 },
{ label: 'The Dark Knight Rises', year: 2012 },
{ label: 'Princess Mononoke', year: 1997 },
{ label: 'Aliens', year: 1986 },
{ label: 'Oldboy', year: 2003 },
{ label: 'Once Upon a Time in America', year: 1984 },
{ label: 'Witness for the Prosecution', year: 1957 },
{ label: 'Das Boot', year: 1981 },
{ label: 'Citizen Kane', year: 1941 },
{ label: 'North by Northwest', year: 1959 },
{ label: 'Vertigo', year: 1958 },
{
label: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ label: 'Reservoir Dogs', year: 1992 },
{ label: 'Braveheart', year: 1995 },
{ label: 'M', year: 1931 },
{ label: 'Requiem for a Dream', year: 2000 },
{ label: 'Amélie', year: 2001 },
{ label: 'A Clockwork Orange', year: 1971 },
{ label: 'Like Stars on Earth', year: 2007 },
{ label: 'Taxi Driver', year: 1976 },
{ label: 'Lawrence of Arabia', year: 1962 },
{ label: 'Double Indemnity', year: 1944 },
{
label: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ label: 'Amadeus', year: 1984 },
{ label: 'To Kill a Mockingbird', year: 1962 },
{ label: 'Toy Story 3', year: 2010 },
{ label: 'Logan', year: 2017 },
{ label: 'Full Metal Jacket', year: 1987 },
{ label: 'Dangal', year: 2016 },
{ label: 'The Sting', year: 1973 },
{ label: '2001: A Space Odyssey', year: 1968 },
{ label: "Singin' in the Rain", year: 1952 },
{ label: 'Toy Story', year: 1995 },
{ label: 'Bicycle Thieves', year: 1948 },
{ label: 'The Kid', year: 1921 },
{ label: 'Inglourious Basterds', year: 2009 },
{ label: 'Snatch', year: 2000 },
{ label: '3 Idiots', year: 2009 },
{ label: 'Monty Python and the Holy Grail', year: 1975 },
];
Highlights
The following demo relies on autosuggest-highlight, a small (1 kB) utility for highlighting text in autosuggest and autocomplete components.
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import parse from 'autosuggest-highlight/parse';
import match from 'autosuggest-highlight/match';
export default function Highlights() {
return (
<Autocomplete
sx={{ width: 300 }}
options={top100Films}
getOptionLabel={(option) => option.title}
renderInput={(params) => (
<TextField {...params} label="Highlights" margin="normal" />
)}
renderOption={(props, option, { inputValue }) => {
const { key, ...optionProps } = props;
const matches = match(option.title, inputValue, { insideWords: true });
const parts = parse(option.title, matches);
return (
<li key={key} {...optionProps}>
<div>
{parts.map((part, index) => (
<span
key={index}
style={{
fontWeight: part.highlight ? 700 : 400,
}}
>
{part.text}
</span>
))}
</div>
</li>
);
}}
/>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
Custom filter
The component exposes a factory to create a filter method that can be provided to the filterOptions prop.
You can use it to change the default option filter behavior.
import { createFilterOptions } from '@mui/material/Autocomplete';
createFilterOptions(config) => filterOptions
Arguments
config(object [optional]):
config.ignoreAccents(bool [optional]): Defaults totrue. Remove diacritics.config.ignoreCase(bool [optional]): Defaults totrue. Lowercase everything.config.limit(number [optional]): Default to null. Limit the number of suggested options to be shown. For example, ifconfig.limitis100, only the first100matching options are shown. It can be useful if a lot of options match and virtualization wasn't set up.config.matchFrom('any' | 'start' [optional]): Defaults to'any'.config.stringify(func [optional]): Controls how an option is converted into a string so that it can be matched against the input text fragment.config.trim(bool [optional]): Defaults tofalse. Remove trailing spaces.
Returns
filterOptions: the returned filter method can be provided directly to the filterOptions prop of the Autocomplete component, or the parameter of the same name for the hook.
In the following demo, the options need to start with the query prefix:
const filterOptions = createFilterOptions({
matchFrom: 'start',
stringify: (option) => option.title,
});
<Autocomplete filterOptions={filterOptions} />;
import TextField from '@mui/material/TextField';
import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
const filterOptions = createFilterOptions({
matchFrom: 'start',
stringify: (option: FilmOptionType) => option.title,
});
export default function Filter() {
return (
<Autocomplete
options={top100Films}
getOptionLabel={(option) => option.title}
filterOptions={filterOptions}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Custom filter" />}
/>
);
}
interface FilmOptionType {
title: string;
year: number;
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
Advanced
For richer filtering mechanisms, like fuzzy matching, it's recommended to look at match-sorter. For instance:
import { matchSorter } from 'match-sorter';
const filterOptions = (options, { inputValue }) => matchSorter(options, inputValue);
<Autocomplete filterOptions={filterOptions} />;
Virtualization
Search within 10,000 randomly generated options. The list is virtualized thanks to react-window.
import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
import useMediaQuery from '@mui/material/useMediaQuery';
import ListSubheader from '@mui/material/ListSubheader';
import Popper from '@mui/material/Popper';
import { useTheme, styled } from '@mui/material/styles';
import { List, useListRef } from 'react-window';
import type { RowComponentProps, ListImperativeAPI } from 'react-window';
import Typography from '@mui/material/Typography';
const LISTBOX_PADDING = 8; // px
type ItemData = Array<
| {
key: number;
group: string;
children: React.ReactNode;
}
| [React.ReactElement, string, number]
>;
function RowComponent({
index,
itemData,
style,
}: RowComponentProps & {
itemData: ItemData;
}) {
const dataSet = itemData[index];
const inlineStyle = {
...style,
top: ((style.top as number) ?? 0) + LISTBOX_PADDING,
};
if ('group' in dataSet) {
return (
<ListSubheader key={dataSet.key} component="div" style={inlineStyle}>
{dataSet.group}
</ListSubheader>
);
}
const { key, ...optionProps } = dataSet[0];
return (
<Typography key={key} component="li" {...optionProps} noWrap style={inlineStyle}>
{`#${dataSet[2] + 1} - ${dataSet[1]}`}
</Typography>
);
}
// Adapter for react-window v2
const ListboxComponent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLElement> & {
internalListRef: React.Ref<ListImperativeAPI>;
onItemsBuilt: (optionIndexMap: Map<string, number>) => void;
}
>(function ListboxComponent(props, ref) {
const { children, internalListRef, onItemsBuilt, ...other } = props;
const itemData: ItemData = [];
const optionIndexMap = React.useMemo(() => new Map<string, number>(), []);
(children as ItemData).forEach((item) => {
itemData.push(item);
if ('children' in item && Array.isArray(item.children)) {
itemData.push(...item.children);
}
});
// Map option values to their indices in the flattened array
itemData.forEach((item, index) => {
if (Array.isArray(item) && item[1]) {
optionIndexMap.set(item[1], index);
}
});
React.useEffect(() => {
if (onItemsBuilt) {
onItemsBuilt(optionIndexMap);
}
}, [onItemsBuilt, optionIndexMap]);
const theme = useTheme();
const smUp = useMediaQuery(theme.breakpoints.up('sm'), {
noSsr: true,
});
const itemCount = itemData.length;
const itemSize = smUp ? 36 : 48;
const getChildSize = (child: ItemData[number]) => {
if (child.hasOwnProperty('group')) {
return 48;
}
return itemSize;
};
const getHeight = () => {
if (itemCount > 8) {
return 8 * itemSize;
}
return itemData.map(getChildSize).reduce((a, b) => a + b, 0);
};
// Separate className for List, other props for wrapper div (ARIA, handlers)
const { className, style, ...otherProps } = other;
return (
<div ref={ref} {...otherProps}>
<List
className={className}
listRef={internalListRef}
key={itemCount}
rowCount={itemCount}
rowHeight={(index) => getChildSize(itemData[index])}
rowComponent={RowComponent}
rowProps={{ itemData }}
style={{
height: getHeight() + 2 * LISTBOX_PADDING,
width: '100%',
}}
overscanCount={5}
tagName="ul"
/>
</div>
);
});
function random(length: number) {
const characters =
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let result = '';
for (let i = 0; i < length; i += 1) {
result += characters.charAt(Math.floor(Math.random() * characters.length));
}
return result;
}
const StyledPopper = styled(Popper)({
[`& .${autocompleteClasses.listbox}`]: {
boxSizing: 'border-box',
'& ul': {
padding: 0,
margin: 0,
},
},
});
const OPTIONS = Array.from(new Array(10000))
.map(() => random(10 + Math.ceil(Math.random() * 20)))
.sort((a: string, b: string) => a.toUpperCase().localeCompare(b.toUpperCase()));
export default function Virtualize() {
// Use react-window v2's useListRef hook for imperative API access
const internalListRef = useListRef(null);
const optionIndexMapRef = React.useRef<Map<string, number>>(new Map());
const handleItemsBuilt = React.useCallback(
(optionIndexMap: Map<string, number>) => {
optionIndexMapRef.current = optionIndexMap;
},
[],
);
// Handle keyboard navigation by scrolling to highlighted option
const handleHighlightChange = (
event: React.SyntheticEvent,
option: string | null,
) => {
if (option && internalListRef.current) {
const index = optionIndexMapRef.current.get(option);
if (index !== undefined) {
internalListRef.current.scrollToRow({ index, align: 'auto' });
}
}
};
return (
<Autocomplete
sx={{ width: 300 }}
disableListWrap
options={OPTIONS}
groupBy={(option) => option[0].toUpperCase()}
renderInput={(params) => <TextField {...params} label="10,000 options" />}
renderOption={(props, option, state) =>
[props, option, state.index] as React.ReactNode
}
renderGroup={(params) => params as any}
onHighlightChange={handleHighlightChange}
slots={{
popper: StyledPopper,
}}
slotProps={{
listbox: {
component: ListboxComponent,
internalListRef,
onItemsBuilt: handleItemsBuilt,
} as any,
}}
/>
);
}
Events
If you would like to prevent the default key handler behavior, you can set the event's defaultMuiPrevented property to true:
<Autocomplete
onKeyDown={(event) => {
if (event.key === 'Enter') {
// Prevent's default 'Enter' behavior.
event.defaultMuiPrevented = true;
// your handler code
}
}}
/>
Limitations
autocomplete/autofill
Browsers have heuristics to help the user fill in form inputs. However, this can harm the UX of the component.
By default, the component disables the input autocomplete feature (remembering what the user has typed for a given field in a previous session) with the autoComplete="off" attribute.
Google Chrome does not currently support this attribute setting (Issue 41239842).
A possible workaround is to remove the id to have the component generate a random one.
In addition to remembering past entered values, the browser might also propose autofill suggestions (saved login, address, or payment details). In the event you want the avoid autofill, you can try the following:
Name the input without leaking any information the browser can use. For example
id="field1"instead ofid="country". If you leave the id empty, the component uses a random id.Set
autoComplete="new-password"(some browsers will suggest a strong password for inputs with this attribute setting):<TextField {...params} slotProps={{ ...params.slotProps, htmlInput: { ...params.slotProps.htmlInput, autoComplete: 'new-password', }, }} />
Read the guide on MDN for more details.
iOS VoiceOver
VoiceOver on iOS Safari doesn't support the aria-owns attribute very well.
You can work around the issue with the disablePortal prop.
ListboxComponent
If you provide a custom ListboxComponent prop, you need to make sure that the intended scroll container has the role attribute set to listbox. This ensures the correct behavior of the scroll, for example when using the keyboard to navigate.
Accessibility
(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/)
We encourage the usage of a label for the textbox. The component implements the WAI-ARIA authoring practices.
API
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.