Salesforce LWC Select option is a component that provides autocomplete functionality (search functionality) with single or multiple select options based on JSON.
Sometimes we need some option category or option group in this option picklist for enhanced searchability.
So, in this blog, we will share how to create group values inside the picklist in LWC Select.
There are two steps involved in creating groups inside the picklist. In the first step, we create a reusable component that will accept options as input parameters from the caller component, and in the second step, we will create a test component for the options group.
Step 1: Creating a reusable select component
As mentioned above, The reusable component that we will create will take parameters such as options and headerLabel from the caller.
The options parameter is the list of options for the component whereas the headerLabel is the header of the select component.
The reusable component will also create a Selected option event that enables you to get selected component functionality which can be handled in the caller component.
Code:
Step 2: Creating a test component in the picklist group
After we have created a reusable component for displaying option groups in a select picklist, it’s time to test the newly created component. For that, we need options in a certain specific format such as parent and child type of structure in JSON.
Events raised by this component to get selected events can be handled by adding an event handler in the Html template.
Code:
Conclusion
We hope you like this solution and try this out to create option groups in LWC. We would like to know your thoughts on this.
Contact the development team at HIC Global Solutions to share your experience or for any assistance on developmental solutions. Also, stay connected with us as we will be back with another interesting blog soon. Till then, keep learning!
