lwc-custom-lookup
Custom lookup component in LWC — typeahead/autocomplete that searches records via Apex SOSL/SOQL, shows pills, supports keyboard navigation, and manages open/close state. Use when lightning-input-field or lightning-record-picker won't work (cross-org search, computed filters, custom result rendering). NOT for in-form lookups inside lightning-record-edit-form (use lightning-input-field) or lookup filters (use admin lookup filter config).
Best use case
lwc-custom-lookup is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Custom lookup component in LWC — typeahead/autocomplete that searches records via Apex SOSL/SOQL, shows pills, supports keyboard navigation, and manages open/close state. Use when lightning-input-field or lightning-record-picker won't work (cross-org search, computed filters, custom result rendering). NOT for in-form lookups inside lightning-record-edit-form (use lightning-input-field) or lookup filters (use admin lookup filter config).
Teams using lwc-custom-lookup should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/lwc-custom-lookup/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How lwc-custom-lookup Compares
| Feature / Agent | lwc-custom-lookup | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Custom lookup component in LWC — typeahead/autocomplete that searches records via Apex SOSL/SOQL, shows pills, supports keyboard navigation, and manages open/close state. Use when lightning-input-field or lightning-record-picker won't work (cross-org search, computed filters, custom result rendering). NOT for in-form lookups inside lightning-record-edit-form (use lightning-input-field) or lookup filters (use admin lookup filter config).
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# LWC Custom Lookup The standard `lightning-input-field` (inside an LDS form) or `lightning-record-picker` (Spring '24+, free-standing) is the correct choice for ~90% of lookup use cases. Reach for a custom lookup only when those don't fit: - **Cross-org / external search** — picking from a system other than Salesforce (the Salesforce-side lookup needs a custom Apex method that talks to the external). - **Computed filters that change per-row** — filter set depends on other field values that the running user just changed; the declarative lookup filter cannot model. - **Multi-object search** — one input that matches Accounts and Contacts and Opportunities together (SOSL territory). - **Custom result rendering** — second line, badges, conditional icons; the standard picker shows one line. The hard parts of a hand-rolled lookup are not the SOQL: they are debounce, keyboard accessibility, the open/close state machine, the pill UI, and not making the user search for the same thing they already selected. Skip any of those and the component feels broken even when it works. ## Recommended Workflow 1. **Confirm `lightning-record-picker` is not enough.** Spring '24 added the standalone picker with `display-info`, `matching-info`, and `filter`. It supports cross-object search via the `objectApiName` array. Read its docs first. 2. **Design the Apex search.** Use SOSL for multi-object, short-string queries (`FIND :term IN ALL FIELDS RETURNING ...`). Use SOQL with `LIKE` only for single-object, indexed-field matches. Both with `WITH SECURITY_ENFORCED` and `@AuraEnabled(cacheable=true)`. 3. **Debounce the search by 250-300ms.** Use `setTimeout` / `clearTimeout` in the input's `oninput` handler. Without debounce, every keystroke fires a callout — exhausting Apex CPU and pinning the org. 4. **Build the open/close state machine.** Three states: closed, open-with-search-loading, open-with-results. Open on focus, close on blur (with a 200ms delay so result clicks land first), close on escape, close on selection. 5. **Implement keyboard navigation.** Arrow up/down move `activeIndex`, Enter selects, Escape closes. Render `aria-activedescendant` on the input pointing at the result li so screen readers track focus. 6. **Render the selected state as a pill.** Once chosen, swap the input for an SLDS pill (`<lightning-pill>`) with a remove action. Re-clicking the remove returns to search mode. 7. **Cache the SObject icon.** `getObjectInfo` gives the icon URL; prepend it to results once per render rather than per result. ## What This Skill Does Not Cover - **Lookups inside `lightning-record-edit-form`** — use `lightning-input-field` and configure lookup filters in metadata. - **`lightning-record-picker` (standalone, Spring '24+)** — see `lwc/lwc-record-picker`. - **Lookup filters at the field-metadata level** — see `admin/lookup-filter-design`. - **Type-ahead against external systems** — see `integration/external-search-via-named-credential`.
Related Skills
customer-data-request-workflow
Implement GDPR/CCPA data subject rights (access, deletion, rectification) using Salesforce Privacy Center and/or custom workflow. NOT for general backup or org-level data retention policy.
omnistudio-custom-lwc-elements
Creating and integrating custom Lightning Web Components within OmniScripts: LWC override patterns, pubsub event handling, custom validation, OmniStudio data passing conventions. Use when a standard OmniScript element cannot meet a UX requirement. NOT for standalone LWC development (use lwc/* skills). NOT for Integration Procedures (use integration-procedures). NOT for embedding an OmniScript inside an LWC (use omnistudio-lwc-integration).
lwc-custom-event-patterns
When and how to design CustomEvent traffic out of an LWC — bubbles / composed / cancelable flag choices, detail payload shape, naming rules, and propagation control. Trigger keywords: 'event not reaching parent', 'composed shadow DOM', 'CustomEvent detail mutation', 'stopPropagation vs stopImmediatePropagation'. NOT for parent-to-child communication (use `@api` — see `lwc/component-communication`), NOT for sibling fan-out (use Lightning Message Service — see `lwc/lightning-message-service`), NOT for wire-service data plumbing.
lwc-custom-datatable-types
Use when you need to extend `lightning-datatable` with custom cell renderings: status pills, progress bars, image thumbnails, action cells, editable pickliststo, rich-text, or any column that `lightning-datatable` does not ship out of the box. Triggers: 'custom cell type lightning datatable', 'progress bar column', 'image column', 'inline edit picklist in datatable', 'rich text column'. NOT for basic datatable usage (see `lwc-data-table`) and NOT for tree-grid or large-dataset virtualization (see `virtualized-lists`).
experience-cloud-search-customization
Use this skill when configuring or extending search on an Experience Cloud site — covering Search Manager scope configuration, LWR vs Aura search component selection, federated search setup, guest user search access, and custom search result components. NOT for SOSL/SOQL query development. NOT for internal Salesforce global search or Einstein Search for agents.
custom-property-editor-for-flow
Use when building or reviewing an LWC Custom Property Editor for Flow screen or action configuration, including the `configurationEditor` metadata hook, builder-side APIs, validation, and value-change events. Triggers: 'custom property editor', 'Flow configuration editor', 'builderContext', 'inputVariables', 'configurationEditor'. NOT for ordinary runtime screen-component behavior when no Flow Builder design-time customization is involved.
flow-custom-property-editors
Use when designing or reviewing Flow custom property editor patterns for screen components or actions, including when Flow Builder needs guided design-time configuration, generic type mapping, or builder-context-aware validation. Triggers: 'Flow custom property editor', 'configurationEditor', 'builderContext', 'inputVariables', 'Flow screen component setup'. NOT for general LWC runtime behavior when Flow Builder customization is not involved.
feature-flag-custom-metadata
Implement environment-safe feature flags using Custom Metadata Types for Apex, LWC, and Flow. NOT for user-level entitlements or permission sets.
custom-index-requests
Use when standard Salesforce indexes are insufficient for query performance on high-volume objects: requesting custom indexes via Salesforce Support for standard fields, deploying custom field indexes via Metadata API, requesting skinny tables, or designing two-column composite indexes. NOT for SOQL query optimization techniques (use data/soql-query-optimization) or general large data volume design (use architect skills).
customer-effort-scoring
Designing a customer experience measurement strategy using CSAT, NPS, and CES metrics in Salesforce Feedback Management: metric selection, survey timing, Feedback Management license requirements, Flow-triggered survey delivery, and CX KPI integration into Service Analytics dashboards. Use when choosing which CX metric to deploy, defining survey timing rules, or connecting survey response data to operational KPIs. NOT for building or configuring the technical survey objects, flows, or email templates (use admin/salesforce-surveys for that). NOT for custom programmatic survey delivery via API.
quote-pdf-customization
Customizing Salesforce Quote PDFs using Visualforce: custom VF-based quote templates, dynamic section rendering, multi-language layouts, logo placement via static resources, and programmatic PDF generation with PageReference.getContentAsPDF(). Use when standard declarative quote templates are insufficient or when CPQ/OmniStudio is not licensed. NOT for LWC-based document generation (use omnistudio/document-generation-omnistudio). NOT for OmniStudio DocGen templates. NOT for standard quote template drag-and-drop editor.
omni-channel-custom-routing
Use this skill to implement Apex-driven custom routing logic for Omni-Channel work items using PendingServiceRouting and SkillRequirement objects. Trigger keywords: PendingServiceRouting, SkillRequirement, IsReadyForRouting, skills-based routing, custom routing Apex. NOT for declarative Omni-Channel queue-based routing setup, routing configurations in Setup UI, or Einstein Classification routing rules.