Dependent Picklist in LWC

Today i am going to share how to create a field dependency in LWC component.

We are using Custom fields on Account that are Upsell(UpsellOpportunity__c) and SLA(SLA__c). We created the field dependency on Object level using these field as shown in image below.

So now we are all set to work LWC Component:


    <lightning-combobox name="Upsell"
                        placeholder="Select Upsell"
    <lightning-combobox name="Sla"
                        placeholder="Select Sla"


import { LightningElement,wire, api, track  } from 'lwc';

import {getObjectInfo} from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import {getPicklistValues} from 'lightning/uiObjectInfoApi';
import SLA_FIELD from '@salesforce/schema/Account.SLA__c';
import UPSELL_FIELD from '@salesforce/schema/Account.UpsellOpportunity__c';

export default class Testdependentpicklist extends LightningElement {
    @wire(getObjectInfo, {objectApiName: ACCOUNT_OBJECT })

    @track slaOptions;
    @track upsellOptions;

    @wire(getPicklistValues, {recordTypeId: '$', fieldApiName: SLA_FIELD })
    slaFieldInfo({ data, error }) {
        if (data) this.slaFieldData = data;
    @wire(getPicklistValues, {recordTypeId:'$', fieldApiName: UPSELL_FIELD })
    upsellFieldInfo({ data, error }) {
        if (data) this.upsellOptions = data.values;
    handleUpsellChange(event) {
        let key = this.slaFieldData.controllerValues[];
        this.slaOptions = this.slaFieldData.values.filter(opt => opt.validFor.includes(key));

XML File :

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

Working Demo:

Please have a look and let me know the feedbacks .

Leave a Reply

Please log in using one of these methods to post your comment: Logo

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

Facebook photo

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

Connecting to %s