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.

https://github.com/choudharymanish8585/Multi-Select-Picklist-Lightning

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

Output

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 Salesforce.com Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

This Post Has 2 Comments

Leave a Reply

Close Menu