Sunday, March 22, 2020

How to set default value in Combo box in Lightning Web Components(lwc)

To set the default value in the Combo box assign the value in js code directly.

Ex:

HTML Code
<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>

JS Code
import { LightningElement, track } from 'lwc';

export default class ComboboxBasic extends LightningElement {
    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;
    }
}

Output

5 comments:

  1. in my case the value is still empty

    ReplyDelete
  2. Thanks a lot for this Solution...

    ReplyDelete
  3. For me still default value "Select an option is showing up"

    ReplyDelete