React MUI multiple select render selected value as Chip

Question

I'm trying to figure how can I render Chip on MUI multiple select components that will act like the checkmarks from the docs.

The component from the docs

I mean that I want to render multiple Chip separate by "," and not expand the select input, is it possible?

Answer 1

If you want to stop the input from growing when you select more options you can use the Autocomplete component that has a limitTags prop where you define how many chips should be displayed when the input is out of focus .

limitTags prop being used to limit the number of chips displayed