Single/Multi Select Combobox with Search in LWC Salesforce

Multi Select Combobox LWC component is easy to create and a generic component because it works for both single select and multi select with search capability. You can use this component in a multi-way like search combobox/picklist or multi select combobox with searchability. As a result, multi-use with lesser code.

Lightning & LWC 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 or search combobox. We will create this within a single component without using any child component. You can find the complete source code in this post.

Multi Select Combobox component Features:

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

Demo GIF:

Single Select Combobox:

search-combobox-lwc-salesforce-demo

Multi Select Combobox:

multi-select-combobox-lwc-salesforce-demo

 

search combobox-lwc-salesforce

multi-select-combobox-lwc-searching

 

Step-1: Create the multiSelectCombobox LWC Component

For creating a new lightning web component you need to use an IDE like VS Code.

Now after component creation, create the CSS file too. Now we will write markup for our component. I have used standard (Salesforce Lightning Design System) SLDS here for styling.

Markup for multiSelectCombobox.html

 

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

 

Finally, paste the CSS in the multiSelectCombobox.css file.

 

Step-2: Now we will call the component.

For Single Select:

 

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 the selected value will be stored. You can also set the additional attributes and switch between single and multi select component. You can also get selected data in the component through the event and attributes as well. When you select a value and click outside of the box, an event is fired.

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′}]

 

How to get the Selected Values:

To get the values, handle the onselect event in your parent component. You will get data inside the event handler.

 

To get the SLDS Reference Click Here

multi-select-combobox-lwc-searching

multi-select-combobox-lwc-cafeforce

 

Also Check:

To create a Mass Attachment Downloader , check out: Mass Attachment Download in LWC Salesforce

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

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

Subscribe
Notify of
guest
15 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Brian

How would you pass a dynamic list of options to the combobox in LWC? In my js, I have:

And in my html, I have:

The console output is the following, so I think I’m building the array correctly. But the combobox doesn’t contain any values.

On Your Feet
Keep the Pace
Let’s Go!
Outdoor: No Sweat
Outdoor: Spirited
Outdoor: Challenging
Choose Your Pace
Outdoor: Choose Your Pace
Easy
Active
Challenging
Moderate
Moderately Challenging
None

Brian

Works great, thank you!

Karuna

Hi,

When the component is invoked from another LWC, the ‘value’ and ‘values’ in “connectedCallback” function are null.

Parent LWC –

In JS file – I have just declared as – @track selvalues = [];

I get an error saying – ” [Cannot read property ‘includes’ of null]”

Upon debugging I found out that, when the component loads in ‘connectedCallback” function the values are null.

Please suggest!

Karuna

Hi Suyash,

Thanks for your reply!

Could you please also tell me how to set the ‘selValues’ in my parent LWC. Currently I only have it declared as ‘@track’ variable. When do I set the ‘selValues’ variable? Is it when I populate the picklistOptions for the combo box?

Appreciate if you could let me know these details.

Karuna

Hi Suyash,

Please ignore my previous reply. This works good and very helpful. Great work 🙂

Dhananjay

Hi, I am getting an error message in Console:
TypeError: Cannot read property insertBefore of undefined.
I am using Parent –Child –Child (Your component) in the code.

Subhadeep

Hi,
I am getting an error when I preview the host Aura App.
error: This page has an error. You might just need to refresh it.
Error during LWC component connect phase: [Unknown public property “autoComplete” of element <LIGHTNING-INPUT>. This is likely a typo on the corresponding attribute “auto-complete”.]
Failing descriptor: {c:multiSelectCombobox}

I followed the same steps. can you please tell me why am i getting this?

abdul

how can get apex code for this