This post discuss about how to select multiple values in dropdown – combobox. We have lightning-dual-list base component which works similar to multi select picklist but it shows two boxes with available and selected and basically occupy more space in page.
This project has 3 components –
mutliSelectPicklist – Main component which displays the dropdown with given picklist values and label.
picklistValue – drop down value component in the picklist
demo – Demo component on how to use this reusable component.
Watch this video how it works when it is placed on your component.
You can find details in this repo.
https://github.com/brahmajitammana/multi-select-picklist-lwc/tree/master/force-app/main/default/lwc
Upcoming Enhancements:
- Ability to align with more styling.
- Ability to select all values when they select a value – All
- Ability to close drop down on click of outer div element rather than mouseleave.
If you see any issue with code, please leave a comment. will fix as soon as possible.
hello,this project mains should create three page to complete Multi Select
To make it dynamic and achieve the result
How to remove the highlighted blue border of the combo-box ? Or how can I make it conditional. like when selected only then make it highlighted blue else don’t highlight it?
probably you can toggle “slds-has-focus” in input element conditionally