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
0 Comments
Inline Feedbacks
View all comments