LWC: Custom picklist using lightning-combobox

When working with LWC sometimes, you need a list of values in picklist(combobox) which is fetched from an apex class. Values can be based on some condition. So, in this blog, we will see how to fetch a list of sObject records and bind values into <lightning-combobox />.


	<div class="slds-p-horizontal_medium">
         <lightning-combobox name="types" label="Type" value={value} options={TypeOptions} onchange={handleTypeChange}> </lightning-combobox> 


import { 
} from 'lwc';

import Objects_Type from "@salesforce/apex/Sample_Controller.f_Get_Types";

export default class Sample_Combobox extends LightningElement {
	@track l_All_Types;
    @track TypeOptions;

	@wire(Objects_Type, {})
    WiredObjects_Type({ error, data }) {

        if (data) {
            try {
                this.l_All_Types = data; 
                let options = [];
                for (var key in data) {
					// Here key will have index of list of records starting from 0,1,2,....
                    options.push({ label: data[key].Name, value: data[key].Id  });

	                // Here Name and Id are fields from sObject list.
                this.TypeOptions = options;
            } catch (error) {
                console.error('check error here', error);
        } else if (error) {
            console.error('check error here', error);


        var Picklist_Value =; 
        // Do Something.


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="">


public with sharing class Sample_Controller {

    public static List<sObject> f_Get_Types(){
        try {
            List<sObject> l_Types = new List<sObject>();
            l_Types = [Select id, Name from Test_Object__c]; // Can include multiple fields, 
			// You can also use any standard or custom object
			// You can get values from custom setting also.
            return l_Types;
        } catch (Exception e) {
            System.debug('Exception: '+e.getMessage());
            return null;

List that is returned can be

  1. From Query result
  2. Custom list – based on condition
  3. From Custom Setting
  4. Can be from Any Custom or standard objects.
  5. A primitive data type list (list of String or Double or Integer etc.)
  6. A non-primitive data type list (any list of sObject)


Lightning Design System- Combobox

8 thoughts on “LWC: Custom picklist using lightning-combobox

    1. Yes it is possible. In JS file, Set value=”default_value”; where you declare a variable named value.

      something like this.

      export default class Sample_Combobox extends LightningElement {
      value=’Some default value text’;

      Other JS code


      if there are multiple combobox, use unique names for all.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s