CODEWITHSUNDEEP
typescriptvaadinlit
dede
dede

Reputation: 57

How do I specify a default value in vaadin-combo-box?

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>
    `;
  }
}

Upvotes: 2

Views: 1252

Answers (1)

FloWy
FloWy

Reputation: 984

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>

Upvotes: 2

Related Questions