CODEWITHSUNDEEP
reactjsmaterial-ui
RyanWH
RyanWH

Reputation: 81

How to limit Material UI Autocomplete multiple selections to one group

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!

Upvotes: 8

Views: 9433

Answers (2)

Siddharth
Siddharth

Reputation: 637

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)}

Upvotes: 16

Olivier Tassinari
Olivier Tassinari

Reputation: 8681

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

Upvotes: 3

Related Questions