How to make MUI Autocomplete multiple
Like in topic, how to be able to let Autcoomplete using multiple values instead of one?
6 Replies
Hi @sensib0i. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To allow the Autocomplete component to select multiple values, you can use the
multiple
prop in the Autocomplete component. Here is an example of how to do it:
In this example, the multiple
prop is used in the Autocomplete component, which allows the user to select more than one value. The defaultValue
prop is also used to set a default option value.
For more information, you can refer to the source (https://refine.dev/blog/material-ui-autocomplete-component/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@667849704293269515> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orangeOP•16mo ago
@kapa.ai
how to use it inside form?
i got code like this
Let me check the knowledge base for you. One moment! :books:
----------------------
To use the Autocomplete component with multiple values inside a form, you can use the
Controller
component from react-hook-form
. The Controller
component allows you to integrate third-party input components with react-hook-form
.
In your code, you are already using the Controller
component correctly. However, you need to uncomment the onChange
prop in the Autocomplete
component and modify it to handle multiple values. Here is how you can do it:
In the onChange
prop, you don't need to access the id
property of value
because value
is an array of selected options when the multiple
prop is true. You just need to pass the value
directly to field.onChange
.
For more information, you can refer to the source (https://refine.dev/docs/api-reference/mui/hooks/useAutocomplete/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@667849704293269515> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orangeOP•16mo ago
Nice, ty works like charm