Dropdown in Lightning Web Component (LWC)

Updated 14 October 2025

Set Up Your LWC Development Environment and Create first component with lwc

Lightning-Combobox is an alternative of Lightning: Select Aura Component.

First, let us create a custom dropdown.

lwc-select.html
<template>
    <label for="FieldSelect" class="slds-form-element__label slds-no-flex">
        <abbr title="required" class="slds-required">*</abbr>//in case you want to mark required
        Select Filter Condition
    </label>
    <select class="slds-select" name = "optionSelect" onchange={changeHandler} >
        <option value="OPTION A">OPTION A</option>
        <option value="OPTION B">OPTION B</option>
    </select> 
</template>

lwc-select.js
import { LightningElement, api,track } from 'lwc';
import getFields from '@salesforce/apex/wk_FilterComponent.getFields';
export default class FilterComponent extends LightningElement {
    @track selectedOption;
    changeHandler(event) {
    const field = event.target.name;
    if (field === 'optionSelect') {
        this.selectedOption = event.target.value;
            alert("you have selected : "this.selectedOption);
        } 
    }
}

Alternatively, you can also use standard lightning web component i.e., Lightning Web Component Combobox.

lwc-select.html
<template>
    <lightning-combobox
               name="progress"
               label="Status"
               value={value}
               placeholder="Select Progress"
               options={options}
               onchange={handleChange} >
   </lightning-combobox>
   <p>Selected value is: {value}</p>
</template>

lwc-select.js
import { LightningElement, track } from 'lwc';

export default class ComboboxBasic extends LightningElement {
@track value = 'inProgress';

get options() {
    return [
             { label: 'New', value: 'new' },
             { label: 'In Progress', value: 'inProgress' },
             { label: 'Finished', value: 'finished' },
           ];
}

handleChange(event) {
        this.value = event.detail.value;
     }
}

Resource: Lightning Web Component Combobox

Read More: Cross-Site-Scripting Salesforce