🔗 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.
✨ 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
📌 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.
