Single/Multi Select Combobox with Search in LWC Salesforce

Suyash N
Suyash N 15.8k Views 31 comments

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:


Multi Select Combobox:



search combobox-lwc-salesforce



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




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 … 🙂

Share This Article
Notify of
Inline Feedbacks
View all comments

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
Moderately Challenging


Works great, thank you!


Getting  [this.template.querySelector(…).refreshOptions is not a function]
after loading the component , in parent component where do call this?



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!


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.


Hi Suyash,

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


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.


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?


how can get apex code for this


Hi, How would you reset the filters in this scenario? I tried the solution, but receiving proxy issue.


How can you reset multi select from parent element? I tried query selector and then tried refresh() and it did not do any changes


Hi Suyash,

Your multi-select component is great to use. Thanks for this.

I have one doubt though. I am using your lwc component inside another lwc component. I cannot able to get selected data in parent lwc component. I am new in lwc development, Can you please guide me?


Thanks Suyash for your suggestion.

I am facing one more problem, when we are removing the pills and doing any operation previously selected options are still there. onselect event is not fired after clicking on pills close icon. Can you suggest any solution?


Hi Suyash,
I have a requirement to create Multiple dropdowns (ReUsable Component). Can you help me?


Hi Suyash,
I’m getting the values from apex controller dynamically.
I have picklist value like below
Label : Test 123
Value: 123

When I click on the input filed it shows the values drop down. I select ine of the value and it updates the input field with correct label.
But suppose I now edit the selected input text eg. “Test 123” to just “Test”. The dropdown updates and shows the filetred value. Now if I select the picklist option again, the Input field label is not getting set. It remains “Test”.
Somehow when I edit the selected value and try to select any new value after edit the input field is not getting updated


Hi, The vertical scroll bar is not working for the component. When we click on scroll bar the, the dropdown is disappearing. Can you please help on this

Last edited 5 months ago by Anjana
Maheedar Nuvvuru

Hi Suyash,

Could you send me html code for this after changes with scrolling


does this component support the selected options by default like preselected options?