Validation Messages<\/strong>: Validation messages are displayed when the component loses focus or via the reportValidity() method. Custom validation messages can also be defined using setCustomValidity().<\/li>\n<\/ul>\n\n\n\nUsing the Lightning Record Picker in a Contact Example<\/h2>\n\n\n\n The following example demonstrates how to use the lightning-record-picker in a LWC to let users select a Contact record.<\/p>\n\n\n\n
contactRecordPicker.html<\/p>\n\n\n\n
<template>\n <lightning-card title=\"Select a Contact\">\n <div class=\"slds-p-around_medium\">\n <lightning-record-picker label=\"Select a Contact\"\n object-api-name=\"Contact\"\n value={selectedContactId}\n placeholder=\"Search Contacts...\"\n icon-name=\"standard:contact\"\n variant=\"label-hidden\"\n size=\"large\"\n onchange={handleRecordChange}>\n <\/lightning-record-picker>\n \n <\/div>\n <template if:true={selectedContactId}>\n <div class=\"slds-p-around_medium\">\n <p>Selected Contact ID: {selectedContactId}<\/p>\n <\/div>\n <\/template>\n <\/lightning-card>\n<\/template><\/code><\/pre>\n\n\n\ncontactRecordPicker.js<\/p>\n\n\n\n
import { LightningElement, track } from 'lwc';\n\nexport default class ContactRecordPicker extends LightningElement {\n @track selectedContactId;\n\n handleRecordChange(event) {\n this.selectedContactId = event.detail.recordId;\n }\n}<\/code><\/pre>\n\n\n\ncontactRecordPicker.js-meta.xml<\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<LightningComponentBundle xmlns=\"http:\/\/soap.sforce.com\/2006\/04\/metadata\">\n\t<apiVersion>62.0<\/apiVersion>\n\t<isExposed>true<\/isExposed>\n\t<targets>\n <target>lightning__AppPage<\/target>\n <target>lightning__RecordPage<\/target>\n <target>lightning__HomePage<\/target>\n <\/targets>\n<\/LightningComponentBundle><\/code><\/pre>\n\n\n\n
\n
\n
The lightning-record-picker component automatically displays a search bar, allowing users to search for Contact records.<\/p>\n\n\n\n
When a user selects a contact, the onrecordchange event triggers the handleRecordChange method, which retrieves the selected record\u2019s ID and displays it on the page.<\/p>\n\n\n\n
Advanced Usage with Matching-info, Display-info, and Filters<\/h2>\n\n\n\n In addition to the basic functionality, Salesforce provides enhanced features like matching-info, display-info, and filtering, which allow for a more tailored user experience.<\/p>\n\n\n\n
contactRecordPicker.html<\/p>\n\n\n\n
<template>\n <lightning-card title=\"Select a Contact\">\n <div class=\"slds-p-around_medium\">\n <lightning-record-picker label=\"Select a Contact\"\n object-api-name=\"Contact\"\n value={selectedContactId}\n placeholder=\"Search Contacts...\"\n icon-name=\"standard:contact\"\n variant=\"label-hidden\"\n size=\"large\"\n matching-info={matchingInfo}\n display-info={displayInfo}\n filter={filterCriteria}\n onchange={handleRecordChange}>\n <\/lightning-record-picker>\n \n <\/div>\n <template if:true={selectedContactId}>\n <div class=\"slds-p-around_medium\">\n <p>Selected Contact ID: {selectedContactId}<\/p>\n <\/div>\n <\/template>\n <\/lightning-card>\n<\/template><\/code><\/pre>\n\n\n\ncontactRecordPicker.js<\/p>\n\n\n\n
import { LightningElement, track } from 'lwc';\n\nexport default class ContactRecordPicker extends LightningElement {\n @track selectedContactId;\n\n handleRecordChange(event) {\n this.selectedContactId = event.detail.recordId;\n }\n\n matchingInfo = {\n primaryField: { fieldPath: 'Name', mode: 'startsWith' },\n additionalFields: [{ fieldPath: 'Phone' }],\n };\n\n displayInfo = {\n primaryField: 'Name',\n additionalFields: ['Email'],\n };\n\n filter = {\n criteria: [\n {\n fieldPath: 'LeadSource',\n operator: 'eq',\n value: 'Web'\n },\n {\n fieldPath: 'Department',\n operator: 'ne',\n value: 'Administration'\n }\n ],\n filterLogic: '(1 OR 2)',\n };\n}<\/code><\/pre>\n\n\n\n
Using Lightning Record Picker in a Loop<\/h2>\n\n\n\n In some cases, you might want to render multiple Record Picker components, such as when displaying a list of items that require users to select related records. You can dynamically create these components using a loop.<\/p>\n\n\n\n
multiProductRecordPicker.html<\/p>\n\n\n\n
<template>\n <lightning-card title=\"Select Products\">\n <div class=\"slds-p-around_medium\">\n <template for:each={productList} for:item=\"product\" for:index=\"index\">\n <div key={product.lineNumber} class=\"slds-grid slds-wrap slds-m-bottom_small\">\n <div class=\"slds-col slds-size_1-of-1\">\n <lightning-record-picker label=\"Product\"\n placeholder=\"Search Product...\"\n object-api-name=\"Product2\"\n variant=\"label-hidden\"\n value={product.productId}\n onchange={handleProductChange}\n data-index={index}>\n <\/lightning-record-picker>\n <\/div>\n <\/div>\n <\/template>\n <\/div>\n <\/lightning-card>\n<\/template><\/code><\/pre>\n\n\n\nmultiProductRecordPicker.js<\/p>\n\n\n\n
import { LightningElement, track } from 'lwc';\n\nexport default class MultiProductRecordPicker extends LightningElement {\n @track productList = [];\n \n connectedCallback() {\n this.initializeProducts();\n }\n\n initializeProducts() {\n this.productList = [];\n for (let i = 0; i < 3; i++) {\n this.productList.push({\n lineNumber: i,\n productId: ''\n });\n }\n }\n\n handleProductChange(event) {\n const index = event.target.dataset.index;\n this.productList[index].productId = event.detail.recordId;\n }\n}<\/code><\/pre>\n\n\n\n
Summary<\/h2>\n\n\n\n This article has hopefully provided a clear understanding of how to use the Lightning-record-picker component in Salesforce LWC. As a result, it enables efficient record selection and, ultimately, offers a better user experience.<\/p>\n\n\n\n
Make sure to leave your feedback or any questions in the comments below!<\/p>\n\n\n\n
![\"Lightning](\"https:\/\/www.irfankhatri.com\/blog\/wp-content\/uploads\/2025\/02\/lightning-record-picker-1.png\")
<\/figure>\n<\/div>\n\n![\"Select](\"https:\/\/www.irfankhatri.com\/blog\/wp-content\/uploads\/2025\/02\/lightning-record-picker-2.png\")
<\/figure>\n<\/div>\n\n![\"Select](\"https:\/\/www.irfankhatri.com\/blog\/wp-content\/uploads\/2025\/02\/lightning-record-picker-3.png\")
<\/figure>\n<\/div>\n\n\n![\"Select](\"https:\/\/www.irfankhatri.com\/blog\/wp-content\/uploads\/2025\/02\/lightning-record-picker-4.png\")
<\/figure>\n<\/div>\n\n\n![\"Select](\"https:\/\/www.irfankhatri.com\/blog\/wp-content\/uploads\/2025\/02\/lightning-record-picker-5.png\")
<\/figure>\n<\/div>\n\n\n