Option Group in LWC Select

LWC select presents menus of options. Sometime we need option group or option category in these menu or option list. This post will give step by step information to create option group in lwc select similar to below image.

I have created this component as re-usable component. So this component will take options as input parameters from caller component. Let us see complete steps for this component

1. Create a re-usable select component
2. Create a test component for option group

1. Create a re-usable select component

Let us create a re-usable select component which will take below parameters from caller

1. options – This is list of options for select component
2. headerLabel- This is header label for select component

This component is also raising selected option event which can be handled in caller component to get selected option.

Code:

2. Create a test component for option group

we have created reusable component for showing option group in select list. Let us test this newly created picklist component. For this we need options in specific format like below json. We have parent and child kind of structure in json.

{
           id:'1',
           groupName:'Best Product',
           childs:
           [{
                id:'1',
                label:'Nature Nector Honey',
                value:'Nature Nector Honey'
             },{
                id:'2',
                label:'Nature Nector Energy Drink',
                value:'Energy Drink'
             }
           ]}
}

We also have to handle event which is raised by component to get selected event. For this we can add event handler in html template like below onproductselection handler.

<c-picklist-group header-label="Select Product" options={options} onproductselection={handleNotification}></c-picklist-group>

Test component code:

Test Page:

Similar Posts:

Dependent PickList In Lightning Web Component

Adding table row dynamically in Lightning Web Component

Reference Link:

OptGroup in HTML

LWC Select element