2

I have created a combo box component using lit and vaadin-combo-box. I was able to create the combo box without any problems, but I don't know how to set the default value. How can I set the default value to "Label 1" before selecting it?

import {customElement} from 'lit/decorators.js';
import {html, LitElement} from 'lit';

const items = [
  {'label': 'Label 1', 'value': 'label1'},
  {'label': 'Label 2', 'value': 'label2'},
];

@customElement('my-element')
export class MyElement extends LitElement {
  render() {
    return html`
      <vaadin-combo-box
          label="combo box"
          .items="${items}"
          required
      >
      </vaadin-combo-box>
    `;
  }
}

1 Answer 1

2

For setting the default element, you can set the selectedItem property of the object.

const el = this.shadowRoot.getElementById('my-box');
el.selectedItem = items[0].label;

See this for more reference.

In addition, you can also set the value in the HTML element directly:

<vaadin-combo-box value="${items[0].label}"></vaadin-combo-box>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.