How to create a LWC multi select combobox?

Question

Is it possible to configure the lightning-combobox to allow multiple selections? I tried this method:

import { LightningElement, track } from 'lwc';

export default class ComboboxBasic extends LightningElement {

    @track value = '';
    selectedVals = [];

    get options() {
        return [
            { label: 'New', value: 'new' },
            { label: 'In Progress', value: 'inProgress' },
            { label: 'Finished', value: 'finished' },
        ];
    }

    handleChange(event) {
        this.selectedVals.push(event.detail.value);
        this.value = this.selectedVals.join(', ');
    }
}

but this doesn't keep mark the selected values in the drop down with the check mark. Is there a better method to implement some sort of Drop down, checkbox, selector?

Answer 1

Generally, you are limited to what is in the LWC spec.

However, the roadmap for combobox is unknown. There are no planned upgrades to it (unlike datatable)

And then, the design spec here does have the CSS and raw markup for multiple selection (you need to implement your own component borrowing from the styles).

FYI, I ended up having to create my own component out of borrowing from the official blueprints, and it's just something you have to do if you can't wait for the base combobox component to have more features.

Answer 2

You can have a look at this Git Repo : MultiPickList using lwc

Configuration Option

@api label  = ''; //Name of the dropDown
@api maxselected  = 2; //Max selected item display
@api options; // List of items to display
@api showfilterinput = false; //show filterbutton
@api showrefreshbutton = false; //show the refresh button
@api showclearbutton = false; //show the clear button

 <c-multi-pick-list label="Pick-List" options={msOptions}  showclearbutton='true' showfilterinput='true' showrefreshbutton='true' onitemselected={handleOnItemSelected}></c-multi-pick-list>

This will fire onitemselected event which will provide you array of selected items

optionally can call getSelectedItems () of c-multi-pick-list component which will also return the array of selected items

Live Demo

Answer 3

There is a standard component present in salesforce component library to build this functionality. Find the link below:

https://developer.salesforce.com/docs/component-library/bundle/lightning-dual-listbox/example

Answer 4

Functionally, it would work as checkbox group:

https://developer.salesforce.com/docs/component-library/bundle/lightning-checkbox-group/example

Unless you're tied to the combobox ui.

Answer 5

This is a bit late, but I have built a combobox that allows multiple selections and displays them as pills. It's very reliable and I've used it in multiple projects.

The code is on github

Usage:

<c-multi-select name="jobStatus" label="Job Status" multi-select-by-default="true"
  value={jobStatus} variant="label-inline" options={jobStatusOptions} dropdown-length="10"
  onchange={handleJobStatusOptionsChange} >
</c-multi-select>

Set options dynamically using this format:

this.jobStatusOptions = [
  { label: 'Value 1', value: 'Value 1' },
  { label: 'Value 2', value: 'Value 2' },
  { label: 'Value 3', value: 'Value 3' },
];

To handle a change:

handleJobStatusOptionsChange(event) {
  let value = event.detail.value;
  //do something with the value
}

Looks like:

Answer 6

Update 2022

I wrote a whole article on how to create a LWC multi select combobox that covers all functions of the standard lightning-combobox and additionally supports multi select:

How to create the LWC Multi Select Combobox that Salesforce is still missing

The source code including JEST unit tests and JSDoc comments is available here:

Custom Multi Select Combobox

Answer 7

There seems to be this component now that can probably help with whatever you were trying to do: https://developer.salesforce.com/docs/component-library/bundle/lightning-pill-container/documentation

However as mentioned without custom code, I do not believe it will be easy to combine this + a combobox without re-coding both components.