LWC - Dependent Picklist Pair

🔗 Reusable Dependent Picklist Pair for Salesforce LWC

A reusable Lightning Web Component that automatically handles Salesforce dependent picklists with dynamic metadata, validation, accessibility, configurable labels, and zero Apex.

📖 Project Overview

Dependent Picklist Pair is a reusable Lightning Web Component designed to simplify one of the most common Salesforce UI requirements—displaying dependent picklists.

Instead of manually querying metadata, decoding validFor values, or maintaining custom mappings, this component leverages Salesforce Lightning UI APIs to automatically retrieve controlling and dependent picklist values while keeping both dropdowns synchronized.

The component is completely reusable and works with any standard or custom object supporting dependent picklists, making it an excellent building block for enterprise Lightning applications.

🔗 View Source Code ⬇ Download ZIP

✨ Key Features

Feature	Description
Native Salesforce Metadata	Uses Lightning UI API to retrieve picklist values without Apex.
Automatic Dependency Handling	Displays only valid dependent values based on the selected controlling value.
Reusable Design	Works with any standard or custom object that supports dependent picklists.
Configurable Labels	Supports custom labels, placeholders, and required indicators.
Programmatic API	Expose values, reset selections, and trigger validation from parent components.
Built-in Validation	Uses native Lightning input validation with reportValidity().
Reactive Updates	Dependent values refresh instantly whenever the controlling value changes.
Zero Apex	No custom Apex controllers or SOQL required.
SLDS Ready	Fully aligned with Salesforce Lightning Design System.
Accessibility	Keyboard-friendly and screen-reader compatible.

🏗 Component Architecture

📁 Project Structure

force-app/
└── main/
    └── default/
        └── lwc/
            ├── dependentPicklistPair/
            │   ├── dependentPicklistPair.html
            │   ├── dependentPicklistPair.js
            │   ├── dependentPicklistPair.css
            │   └── dependentPicklistPair.js-meta.xml
            │
            └── dependentPicklistDemo/

⚙️ Public API

Property	Description
objectApiName	Salesforce object API name.
recordTypeId	Record Type used for metadata retrieval.
controllingFieldApiName	API name of the controlling picklist.
dependentFieldApiName	API name of the dependent picklist.
required	Marks both fields as mandatory.
disabled	Disables user interaction.

🔄 Component Workflow

Load Component
      │
      ▼
Retrieve Object Metadata
      │
      ▼
Load Picklist Values
      │
      ▼
Render Controlling Picklist
      │
      ▼
User Selects Value
      │
      ▼
Filter Valid Dependent Values
      │
      ▼
Render Updated Dependent Picklist

🛠 Public Methods

• getValue() — Returns current controlling and dependent selections.
• setValue() — Programmatically update selected values.
• reset() — Clears both picklists.
• reportValidity() — Executes Lightning validation.
• focus() — Moves focus to the controlling picklist.

🎯 Business Use Cases

• Account Address Forms
• Lead Qualification
• Case Classification
• Product Configuration
• Service Request Forms
• Opportunity Management
• Experience Cloud Registration
• Dynamic Record Creation Wizards
• Reusable Enterprise Form Libraries

♿ Accessibility

• Keyboard navigation support.
• Native Lightning validation.
• Screen-reader compatible.
• SLDS-compliant styling.
• Responsive layout.

🚀 Deployment

sf org login web --alias myOrg

sf project deploy start \
--source-dir force-app \
--target-org myOrg

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

The Dependent Picklist Pair component offers a clean, reusable, and metadata-driven approach to implementing dependent picklists in Salesforce. By leveraging the Lightning UI API, it eliminates the need for Apex, automatically synchronizes controlling and dependent values, and provides a flexible API that can be reused across forms, record pages, Experience Cloud sites, and enterprise Lightning applications.