Creatable Multiselect in Material UI
Introduction
One common UI pattern is a multi select component that allows users to select multiple options from a list. However, in some cases, users may need to add new options to the list that are not already available.
In this blog, we'll show you how to create a Creatable multi select component in Material UI that allows users to select from a list of options or create new options by typing in a value. We'll use the createFilterOptions components that are part of the Material UI library to filters options
Body
To create a Creatable multi select component in Material UI using createFilterOptions function, you can follow these steps:
- Import the necessary components from Material UI and createFilterOptions from @material-ui/core/utils.
- Define the array of options that the user can select from.
- Define the filter Options function that filters the options based on the user's input and creates a new option if the user's input is not in the list of options. You can use filterOptions in Autocomplete component.
In this code, we're using the createFilterOptions function to create a custom filter function that handles the filtering of the options and creates a new option if the user's input is not in the list of options. We're passing in various options to configure the behavior of the filter function, such as ignoring case and accents, trimming the input value, and limiting the number of options displayed.
It will filtered data.
- Define the onChange “CreateNewOption” function to create new option value should be permanently store inside our database.
- Render the Autocomplete component to create the Creatable multiselect component. Replace filterOptions which is already provided in above point.
In this code, we're using the Autocomplete component to create a Creatable multiselect component that allows users to select from a list of options or create new options by typing in a value. We're passing in various props to configure the behavior of the component, such as the options, the filter function, and the selected values.
By using the create Filter Options function, we can easily create a custom filter function that handles the filtering of the options and the creation of new options. This makes it easy to create a flexible and customizable Creatable multiselect component in Material UI.
Conclusion
The creatable multiselect in Material UI provides a flexiblility to allow users to create their own options in addition to selecting from a predefined list, this feature enhances the user experience and reduces frustration. The Material UI design principles of consistency, accessibility, and simplicity ensure that the feature is user-friendly for all users. The creatable multiselect is particularly useful for dealing with user-generated data or providing an interface for advanced search queries.
Overall, this feature is a valuable addition to any Material UI-based application, improving the user experience and making it easier for users to interact with your application.
Posted by: Prajakta Maskare
Sr. Software Developer
Comments