How to limit Material UI Autocomplete multiple selections to one group

user_858189 0
Viewed 3920

I would like to limit multiple selections within the Material UI Autocomplete component to options within the same group.

See linked sandbox for a setup of the problem without an implemented solution. https://codesandbox.io/s/material-demo-7g4ed?file=/demo.js

So, for example in the sandbox above the user should only be able to select Apple or Amazon products, not both.

Any help is greatly appreciated!

material-ui reactjs
2 Answers

Suppose you would like to limit selections to 3, update those two lines in your code

freeSolo={tags.length > 3 ? false : true}

getOptionDisabled={(options) => (tags.length > 3 ? true : false)}

user_119583600

You can use the getOptionDisabled prop to flag the options that can be selected, based on the current value.

user_28017140
Related