MultiSelect Dropdown Aura Component

MultiSelect Dropdown Aura Component

There are multiple drop-down base components available for us as part of Lightning Framework like <lightning:select> and <lightning:combobox>, but none of them support multi-option selection.

In this post, we will be creating our own aura component which will offer a nice drop down with multiple option selection. Not only this, there will plenty of other features and configuration available for this aura component, like clearing the selection, displaying label, refreshing values and more.

Usage and Configuration

This is a custom aura component to give the flexibility of multi-selection drop-down. Please take a note of a few things on how you can make the most out of this component:

General syntax to use: <c:MultiSelect msoptions="{!v.options}" />

The only required attribute is “msoptions” which accept a list or javascript array of object. Each object must have two parameters:

  • Id – Id of option. Always try to keep this value unique as it helps in finding out selection uniquely.
  • Name – Label of option. This value renderes in the pick list field.

Sample options list could be something like below:
[{‘Id’:1,’Name’:’Option 1′}, {‘Id’:2,’Name’:’Option 2′}, {‘Id’:3,’Name’:’Option 3′}]

Other Optional Attributes:

  • mslabel – Label to be shown on top of multiselect dropdown component. If you don’t supply a value, the label will not be shown.
  • maxSelectedShow – It accepts a number. Show the selected item names. If selection count increases, it displays the count of selection instead of selection names. The default value is 2.
  • showFilterInput – Boolean attribute, if set to true, a text box will be displayed within multiselect component to search through values. Default is true.
  • showRefreshButton – Boolean attribute, if set to true, display a refresh button to clear the picklist selection and rebuild the picklist. Default is true.
  • showClearButton – Boolean attribute, if set to true, display a clear button to clear text box value.
  • msname – String attribute to display default value in picklist before selection. Default is “Select a value”

Get selected options

To get all selected options, assign an aura:id to multiselect component and access the value of attribute selectedOptions:

<c:MultiSelect aura:id="jobLocationMS" mslabel="Job Location" msoptions="{!v.options}" />

In JavaScript Controller:

const selectedOptions = component.find("jobLocationMS").get("v.selectedOptions");//this will return an array of selected elements

MultiSelect Dropdown component Code

The complete code of the component is available to be downloaded on my GitHub repository here.

Usage Example

Now let’s see how you can create MultiSelect dropdown in your own aura component by using the above component.

Note: Make sure you have downloaded above component and added it in your org before you use it.

To use the above component, we will create a new component and will pass the options list to the MultiSelect component.

MultiSelectUsageDemo Component

MultiSelectUsageDemo JS Controller


Below GIF shows the output of this small component. You can make it as complex as you want, you can add as many MultiSelect components as you want within your own aura component.

Check out more

Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

This Post Has 9 Comments

  1. This is a great! Thank you for sharing. I have a question — or maybe a few … In the MultiSelect.cmp around like 68 you have the id=”listbox-option-unique-id-01″ — this is inside iteration. Should that be truly unique?

    1. No really!! We are not using that Id anywhere.
      It’s my mistake that I haven’t removed it.
      You may have the same id for all list items or you may remove it completely as it won’t affect the component.

      1. Thank you — I’m curious, what action on the page do use you to fire the actual filtering of data? It isn’t a variable on the component, are you simply adding some code to the onInputChange event?

        1. I guess maybe to be more specific — if the MultiSelect Component is a child, and the parent has the data to be filtered, how are you firing that event back on the parent? I hope that makes sense. Thank You!

  2. This helped me a bunch I had to Wire it up to an existing component I had but after much debugging it seems to be implemented and working correctly. I had to tweak the Helper to grab the list and sent it to a registered event so that I could get the value in the Parent Component. And and a separate function to get the actual value that was clicked as opposed to the selectedOptions.Length + ‘Options Selected’

    Thank you for the knowledge as it would have taken me a lot longer to build this from scratch.

  3. It is really good. Thanks for the sharing.

  4. Hi Manish, the component is great and has saved so much time already. My current use case for this, however, is to allow the user to select some options in the list, they can then leave the page and return at a later date (the selected options are saved). I am having difficulty however setting the previously selected values as the component loads… Do you have any advice on how this is to be achieved? Many thanks in advance

Leave a Reply

Close Menu