Create Multi Select Combobox / picklist in Lightning Salesforce

cafeforce
cafeforce 11.2k Views 26 comments

Multi Select Combobox lightning component is easy to create and works for both single select and multi select.

Lightning comes with many pre-built components that are easy to use but still many components are missing by date. One of them is the multi-select Combobox/picklist component. We will create this within a single component without using any child component or event. You can find the complete source code in this post.

Multi Select Combobox component Features:

  • Single component
  • Options attribute to pass List
  • Option to switch between Single Select and Multi Select.
  • Separate attributes for single and multi select to get selected values.
  • search functionality to filter options
  • Option to set the minimum character to start searching
  • Ability to set the label of combobox
  • combobox disable functionality

Demo GIF:

Single Select Combobox:

Multi Select Combobox Lightning

Multi Select Combobox:

Multi Select Picklist Lightning

Also, Check:
To create a multi-select Combobox in LWC, check out: Multi-Select LWC Combobox

Step-1: Create the MultiSelectCombobox Component

For creating a new lightning component navigate to Developer Console > File > New > Lightning Component

Enter Name & Description and click Submit. Now component markup file will open y default. In the right sidebar, click on Controller, Helper, and Style to create those files too.

Now since all the files are created, we will write markup for our component. I have used standard (Salesforce Lightning Design System) SLDS here for styling.

Markup for MultiSelectCombobox.cmp

Now open the controller file MultiSelectComboboxController.js and paste the below code.

Open the helper file MultiSelectComboboxHelper.js and paste the below code.

Finally paste the CSS in MultiSelectCombobox.css file.

Step-2: Now we will call the component.

For Single Select:

multi select picklist lightning

For Multi Select:

Finally, our component is ready to use. Now while calling this component, you need to pass the options list and attribute in which selected value will be stored. You can also set the additional attributes and switch between single and multi select component.

How to pass the data (Option list format):

Data should be passed as Object List in the form of label and value.

Eg: [{‘label’: ‘University of Texas’, ‘value’:’UTT112′}]

To disable a value in the list:

To disable a particular element in the options list, simply add ‘disabled’: true in that element object.

selected value in multi select combobox

multi select picklist dropdown

Also, Check:

To create a single-select custom lookup, check out: Custom Lookup Lightning Component

To create a Multi Select Lookup component, check out: Multi Select Lookup Lightning

For any queries or suggestions regarding this post, comment below:
Cheers … 🙂

Share This Article
26 Comments
Subscribe
Notify of
guest

26 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Rishika

Hi,
Using the above component, i am able select multiple picklist values…but pre populating them is a issue for me.
Could you please explain that as well?

B N

Hi,

How to get the Selected Values in Parent Component, There is either Application or Component Event Declared in your Component.

Shaikh

Hi,
I used above component for multi select picklist, i passed values it is showing my values currectly which is fine, but on selecting a value i am getting error “This page has an error. You might just need to refresh it. First, would you give us some details? (We’re reporting this as error ID: -2081392871)”
I checked by debugging “selectItemHelper” helper method i can see selected values currectly but I don’t why that error is occuring each time i select value.
Please help on this.

Fatih BERBER

It has a call to event.preventDefault();, But the function hasn’t ‘event’ parameter so I get an ‘[NoErrorObjectAvailable] Script error.’ error message. The function Helper => blurEventHelper function.

blurEventHelper : function(component) Transform to blurEventHelper : function(component,event)

Kirit

Hi,
It is working for me. How can i use event on this?

Last edited 4 years ago by Kirit
Amol

How can we use 2 multiselect picklists in one lightening component?

Ravi

how to disable any of these options by using controller js.

kiarn

hi,
can u pls explain how can i pass dynamic list instead of default hadcoding values and labels

sara

Hello I want to call the answers from My apex class and to use them in the multiselect to show a list of persons who are related to the choices that exists in the options of the multiselect but I dont know how to do that

sara

Hi Suyash Thank you for you answer but Iwas talking about after getting dynamic options and selecting one option between the options of the dynamic list how to use it and show the apex response related to each selected option.
I need to show a list of things each time I select an option in the multiselect.
Thank you

Aravind

Hii,

While Using the above Component Iam getting an Error like

Uncaught Action failed: c:MultiSelectCombobox$controller$blurEvent [Cannot read properties of undefined (reading ‘value’)]

Can You help me with this

Arian Fetahaj

Hi Suyash. Very great work here which I have been using in one of my pages for over a year already. I modified it a little to accommodate some further requirements. Only suggestion that I’d have is that you cannot really populate the pills (in Multi Select) dynamically right now (e.i. if you build a feature where you can store and re-use your filters) because the “.selected” attribute of the options (that you iterate through in aura) is only turned true during the selectItem function which obviously is not executed when you set the values from the outside. Thanks and have a good day!

Rohit J Hooli

I tried using this component as a child component on another Form component, used 8 of these child components but the problem is, when two child components are using the same options, then the values are duplicated on the second child even when none of them are selected on the second child component.