We’re Heading to CNX ’25. Let's Meet in Chicago! Join HIC at Salesforce Connections'25 for conversations, collaboration, and co-creation.

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.

salesforce lwc

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!

Related Articles
How to Use Platform Events in Salesforce Flow for Real Time Updates

Platform events in Salesforce Flow are a great tool for creating real-time, event-driven apps that automate business operations with precision and speed. By integrating Platform Events’ publish-subscribe approach with Salesforce Flow‘s low-code features, you can automate processes, allow real-time system interaction, and optimize how your organization manages dynamic data changes. This guide will demonstrate how […]

Read More
Build a Dynamic Salesforce Data Viewer with hange kardo bas LWC

Lightning Web Components (LWC) is a modern JavaScript framework that is used for building responsive, dynamic applications on the Salesforce platform. In LWC, data flows from parent-to-child component. Variables marked as @api in the child component are open for a parent to pass values directly into the child’s HTML template, making the component interactable. To […]

Read More
Expert Guide On Nominal XIRR Calculation Using LWC in Salesforce

When building financial tools within Salesforce, handling irregular cash flows with precision is a must. Whether you’re developing investment trackers, portfolio performance dashboards, or funding monitors, calculating Nominal XIRR (Extended Internal Rate of Return) becomes essential. In this blog, you’ll learn how to build a Lightning Web Component (LWC) in Salesforce that calculates Nominal XIRR […]

Read More
Beginners Guide to Making Your LWC Component Multilingual

If you’re wondering how to make your LWC component multilingual, you’re already ahead of the curve. Global users expect content in their native language, and Salesforce gives you the tools to deliver exactly that. With Custom Labels and the Translation Workbench, you can easily localize your Lightning Web Components without touching a single line of […]

Read More
Hands-On Guide Building a Drag-and-Drop Form Builder Using Lightning Web Components

Drag-and-drop interfaces are a user experience staple, and when paired with the power of Lightning Web Components (LWC), they unlock dynamic, highly interactive Salesforce components. In this blog post, we’ll walk you through how to build a custom drag-and-drop form builder in LWC. Users can drag form fields like text inputs and dropdowns into a […]

Read More
Please Make Blog Banner How to Create an Agentforce Enabled Scratch Org in Salesforce 100 1

Setting up an Agentforce-enabled scratch org is the most important step for developers who want to experiment with AI features such as Prompt Builder and Einstein GPT. Whether you’re developing the next generation CRM software or experimenting with how generative AI may improve user experience, a scratch org equipped with Agentforce is your playground. Follow […]

Read More
Our Location worldwide
Indian Flag India
3rd Floor, A-10, Pegasus Tower, Sector 68, Noida, Uttar Pradesh 201301 +91-1203117884
United States of America Flag USA
333 West Brown Deer Road Unit G – 366 Milwaukee WI, USA 53217 +1(262) 310-7818
United Kingdom Flag UK
7 Bell Yard, London, WC2A 2JR +44 20 3239 9428
Canada Canada
HIC Global Solutions INC
6D - 7398 Yonge St #1124 Thornhill, ON L4J 8J2 Canada +1(262) 310-7818