The Lightning Combobox is one of the most versatile and commonly used components in Lightning Web Components (LWC). It provides users with a dropdown interface to select from predefined options, making forms more user-friendly and data entry more consistent.
In this post, we’ll walk through how to use the lightning-combobox in LWC with a simple example.
A Lightning Combobox is a form input component that displays a dropdown list of selectable options. It combines the functionality of a text input with a dropdown menu, allowing users to either select from predefined options or, in some cases, enter custom values.
Let’s start with a simple example to understand the fundamental structure of a combobox in LWC.
HTML Template (BasicCombobox.html)
<template>
<lightning-card>
<div class="slds-p-horizontal_medium">
<lightning-combobox
name="Size"
label="Select a Size"
value={selectedsizeValue}
placeholder="Choose a Size"
options={AvailableSizeOptions}
onchange={handleChange}>
</lightning-combobox>
<div class="slds-p-top_medium">
<p>Selected Size is : {selectedsizeValue}</p>
</div>
</div>
</lightning-card>
</template>
basicCombobox.js
import { LightningElement } from 'lwc';
export default class BasicCombobox extends LightningElement {
selectedsizeValue = '';
AvailableSizeOptions = [
{ label: 'small', value: 'small' },
{ label: 'Medium', value: 'Medium' },
{ label: 'Large', value: 'Large' },
{ label: 'XL', value: 'XL' }
];
handleChange(event) {
this.selectedsizeValue = event.detail.value;
console.log('Selected value:', this.selectedsizeValue);
}
}
Meta-XML file
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>60.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Here’s an example that demonstrates loading options dynamically from an Apex controller:
Example: I want to show list of account records as combobox.
Apex Class :
public with sharing class getAccountRecord {
@AuraEnabled(cacheable=true)
public static List<Account> getAccountrecordforcombobox() {
return [
SELECT Id, Name
FROM Account
LIMIT 10
];
}
}
accountRecordAsCombobox.html
<template>
<lightning-card>
<div class="slds-p-horizontal_medium">
<lightning-combobox
name="Account Record"
label="Select Account Record"
value={ temporaryValue}
placeholder="Choose a account"
options={accountOptions}
onchange={handleChange}>
</lightning-combobox>
<div class="slds-p-top_medium">
<p>Selected Account record is : {selectedValue}</p>
</div>
</div>
</lightning-card>
</template>
accountRecordAsCombobox.JS
import { LightningElement, track, wire } from 'lwc';
import getAccountRecordOptions from '@salesforce/apex/getAccountRecord.getAccountrecordforcombobox';
export default class AccountRecordAsCombobox extends LightningElement {
@track accountOptions = [];
@wire(getAccountRecordOptions)
error;
selectedValue;
temporaryValue;
@wire(getAccountRecordOptions)
wiredAccounts({ error, data }) {
if (data) {
this.accountOptions = data.map(account => ({
label: account.Name,
value: account.Id
}));
this.error = undefined;
} else if (error) {
this.error = error;
this.accountOptions = [];
}
}
handleChange(event) {
this.temporaryValue = event.detail.value;
// Find the selected account option
const selected = this.accountOptions.find(
option => option.value === this.temporaryValue
);
console.log('selected', selected);
this.selectedValue = selected ? selected.label : '';
console.log('Selected Value:', this.selectedValue);
console.log('Selected Label:', this.selectedLabel);
}
}
AccountRecordAsComboboxMeta-xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>63.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
In the above example I have queried limited number of account records then added all those result in collection variable in apex then passed in to JS and stored in array. Then used array to show the option as combobox.
One of the most important aspects of creating user-friendly forms is ensuring data integrity through proper validation. The Lightning Combobox component comes with built-in client-side validation features that make it easy to enforce required selections and provide meaningful feedback to users.
We can make combobox as required. When you add this attribute, the component automatically prevents form submission if no option is selected and displays a clear error message to the user.
<lightning-combobox
name="Account Record"
label="Select Account Record"
value={selectedValue}
placeholder="Choose a account"
options={accountOptions}
required
onchange={handleChange}>
</lightning-combobox>
And To check the validity states of an input, use the validity attribute, which is based on the ValidityState object. You can access the validity states in your Javascript. This validity attribute returns an object with Boolean attributes.
Don’t forget to checkout: Salesforce Agentforce Prompt Engineering: Masterclass Guide.
Using a lightning-combobox in LWC is straightforward yet powerful. From static options to Apex-driven dynamic lists, it can be adapted to fit almost any form-related requirement in Salesforce apps.
Want to promote your products/services in front of more customers?
194 Views
203 Views
210 Views
199 Views
282 Views
140 Views
184 Views
262 Views
