How to display Translation from a Picklist in LWC

 Hi,

Here we are going to learn how to display translations for the Picklist values in LWC.

Here let's take the picklist field "LeadSource"

displayLead.html :

<template>

    <template if:true={isshowCard}>

        <lightning-card>

            <h3 slot="title" style="color: red;">              

                <lightning-icon icon-name="standard:lead" size="small"></lightning-icon> &nbsp;

                Lead Record

            </h3>

        

            <div>

                <lightning-layout>

                    <lightning-layout-item padding="around-small">

                        <div class="header-column">

                            <p class="field-title">

                                <b>Lead Name<br /> </b>

                            </p>

                            <p style="color: rgb(255, 81, 0);"> {leadname}</p>

                        </div>

                    </lightning-layout-item>

                    <lightning-layout-item padding="around-small">

                        <div class="header-column">

                            <p class="field-title">

                                <b>Lead Source <br /></b>

                            </p>

                            <p>{leadsource}</p>

                        </div>

                    </lightning-layout-item>

                </lightning-layout>

            </div>

        </lightning-card>

    </template>

</template>

displayLead.js :

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

import LEAD_OBJECT from '@salesforce/schema/Lead';

import LEAD_SOURCE from "@salesforce/schema/Lead.LeadSource";

import LEAD_NAME from "@salesforce/schema/Lead.Name";

import { getRecord } from 'lightning/uiRecordApi';

const FIELDS = [LEAD_SOURCE, LEAD_NAME];

export default class DisplayLead extends LightningElement {

    @api recordId;

    leadRecord;  

leadsource;

leadname;

    @wire(getRecord, { recordId: '$recordId', fields: FIELDS })

    leadRecord({ error, data }) {

       if (data) {

            this.leadRecord = data; 

            //Here displayValue helps to display translation for picklist LeadSource 

            this.leadsource = this.accountRec.fields.LeadSource.displayValue;

            this.leadname =this.accountRec.fields.Name.value;

        }

    }

}

displayLead.js-meta.xml

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

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>52.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

    </targets>

</LightningComponentBundle>

Reference:

https://developer.salesforce.com/docs/component-library/documentation/en/lwc