It’s helpful at times to be able to programmatically set values in a component. Often this can be accomplished in a simple manner with useState
.
For Autocomplete, it was a bit more complicated and difficult to find. After finally getting it working, I realized there was actually an example straight from the docs of programmatically setting values. It’s how the MUI team created the ‘fixed options‘ demo.
Since it was difficult to find, I decided it was worth writing up and discussing.
Full React code is in the Resources section.
Setting an Array of Values in Autocomplete with useState and onChange
First, create the state variable:
const [autocompleteValues, setAutocompleteValues] = useState([
]);
Second, make sure your Autocomplete component has the following props in the JSX:
<Autocomplete
multiple
value={autocompleteValues}
onChange={handleChange}
//more props...
/>
Finally, create the handleChange function:
const handleChange = (event, value) => {
setAutocompleteValues(value);
};
That’s all it takes. However, it’s worth taking a look at what is happening in the onChange handler. Take a look at the below screenshot of dev tools.

The debugger has tripped in the handleChange event after a third item was selected in the autocomplete dropdown. Value
has been logged to the console. It is an array that contains both the existing values and also the newest addition. Because of this, you can simply swap out the array of values in the autocompleteValues
state reference. Sometimes it can be tricky to deal with useState when it contains an array, but in this case it is easy.
Learn here how to style the MUI Autocomplete Input and Popper.
Setting Multiple Default Values in MUI Autocomplete
If we wanted to set multiple default values in the Autocomplete component, we simply change the initialization of the autocompleteValues:
const [autocompleteValues, setAutocompleteValues] = useState([
top100Films[11],
top100Films[12]
]);
In this example I created the array with two values in it. Autocomplete has a defaultValue
prop, but when we are using useState and programmatically setting values, we don’t want to use the defaultValue
prop. It would simply be immediately overridden by the value
prop.
However, if you were using defaultValue
prop in a different use case, it can accept either a single value or an array of values. For example, defaultValue={[top100Films[11], top100Films[12]]}
.
Here’s how to get and set single values (and default values) in MUI’s Autocomplete.
MUI Autocomplete Fixed Options Demo
Most demos in the Material-UI docs are demos of props being used. The Fixed Options demo is different because it makes use of React hooks to accomplish something clever with a chip.
There are two primary steps. The first is making sure the state always updates with a constant:
const fixedOptions = [top100Films[6]];
const [value, setValue] = React.useState([...fixedOptions, top100Films[13]]);
fixedOptions
never gets overridden or wiped out. The onChange handler looks similar.
The second step is to disable any chips that have the same index as any fixed options:
renderTags={(tagValue, getTagProps) =>
tagValue.map((option, index) => (
<Chip
label={option.title}
{...getTagProps({ index })}
disabled={fixedOptions.indexOf(option) !== -1}
/>
))
}
There was no special prop to set, just a smart use of existing props.
Resources
Here’s a demo on how to use Autocomplete’s getOptionLabel, renderInput, and renderOption.
Here’s how to set and get values in the MUI TextField.
You can use MUI’s ClickAwayListener to create your own Autocomplete.
Hi, your article has saved me from a huge deadlock! I didn’t recognize that there is the ‘value’ prop in the Autocomplete component! So, I kept trying to manipulate the ‘defaultValue’ prop instead. You brought me out the very important point!
Hope you have great times and Thank you for sharing this!
I’m glad the article helped! Thanks for letting me know!
Hi Jon, I am having difficulty passing data, from an existing record, back to the autocomplete field when trying to edit a form. I am hoping that you can provide some help. The autocomplete field data would be an object with a label and a value …eg {label: Ben, value: 1}
Hi Ben, thanks for reading and commenting. I realized through more research that you are probably running into a problem with the default implementation of isOptionEqualToValue failing on the comparison test because it has difficulty comparing objects for equality. Take a look at this SO post for more info.