How to getPicklistValues in LWC | Custom and Standard Objects

We often need to fetch picklist field options when we are building a custom UI using LWC. The Lightning Ui Object Info API provides powerful JS API to read the picklist values for the fields, there is a function called getPicklistValues.

The getPicklistValues works with all custom and standard objects (with a few exceptions to standard objects). Let us learn how to use the getPicklistValues.

The getPicklistValues accepts three input parameters.

objectApiName: API name of a supported object.
recordTypeId: ID of the record type. If your object does not have a record type then you must specify the default record type id = 012000000000000AAA.
fieldApiName: API name of the picklist field on the object.

Example Scenario: Fetch Opportunity StageName picklist values in LWC.

You need to build a custom LWC component to create an Opportunity with the Stage Name field, so let us see how you can get the picklist values of the StageName field from the opportunity object. Let us try it step by step.

Import the object definition (Optionally you can also pass the object name dynamically like Opportunity or Custom_Object__c.

// Opportunity Object
import OPPORTUNITY_OBJECT from '@salesforce/schema/Opportunity';
import STAGE_NAME_FIELD from '@salesforce/schema/Opportunity.StageName';

Import the getPicklistValues function.

import { getPicklistValues } from 'lightning/uiObjectInfoApi';

You need a Record Type ID to fetch picklist values, which can vary according to record types. So let's fetch the DefaultRecordTypeId, remember if your object does not have Record Types enabled then you can pass hardcoded the value 012000000000000AAA to recordTypeId param.
Let us fetch the DefaultRecordTypeId for Opportunity Object using UI Object Info API.
```
@wire(getObjectInfo, { objectApiName: OPPORTUNITY_OBJECT })
opportunityInfo;
```

Let's now call the getPicklistValues using wired function. Note that we are using the DefaultRecordTypeId from the UI Object Info API.

@wire(getPicklistValues, { recordTypeId: '$opportunityInfo.data.defaultRecordTypeId', fieldApiName: STAGE_NAME_FIELD })
StageNamePicklistValue;

Now the final part, use the picklist values in the combo box component.

<template if:true={StageNamePicklistValue.data}>
    <lightning-combobox
        name="StageName"
        label="Stage"
        value={stageName}
        placeholder="Select Stage"
        options={StageNamePicklistValue.data.values}
        onchange={handleChange}
    ></lightning-combobox>
</template>

You can call this function as many times as the number of picklist fields required, and they can belong to the same object or a different one. Now let us put all the steps together.

Final Code for getPicklistValues in LWC

picklistValuesDemo.js

import { LightningElement, wire } from 'lwc';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';

// Opportunity Object
import OPPORTUNITY_OBJECT from '@salesforce/schema/Opportunity';
import STAGE_NAME_FIELD from '@salesforce/schema/Opportunity.StageName';
export default class PicklistValuesDemo extends LightningElement {

    @wire(getObjectInfo, { objectApiName: OPPORTUNITY_OBJECT })
    opportunityInfo;

    @wire(getPicklistValues, { recordTypeId: '$opportunityInfo.data.defaultRecordTypeId', fieldApiName: STAGE_NAME_FIELD })
    StageNamePicklistValue;

    handleChange(e) {
        // handle input
    }
}

picklistValuesDemo.html

<template>
    <lightning-card title="getPicklistValues Demo">
        <div class="slds-var-p-horizontal_small">
            <template if:true={StageNamePicklistValue.data}>
                <lightning-combobox
                    name="StageName"
                    label="Stage"
                    value={stageName}
                    placeholder="Select Stage"
                    options={StageNamePicklistValue.data.values}
                    onchange={handleChange}
                ></lightning-combobox>
            </template>
        </div>
    </lightning-card>
</template>

Output

And that's how you fetch picklist field values in LWC without using any apex code.

LWC Roadmap

Check out my other articles about LWC Basics.

LWC Series: Your Roadmap to Mastering Lightning Web Components