[SalesForce] How to create a LWC multi select combobox

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?

Best Answer

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.

Related Topic