Combo Box

<vaadin-combo-box
  allow-custom-value
  label="Browser"
  helper-text="Select or type a browser"
  .items="${this.items}"
></vaadin-combo-box>

<vaadin-combo-box
  allow-custom-value
  label="Browser"
  helper-text="Select or type a browser"
  .items="${this.items}"
  @custom-value-set="${(event: ComboBoxCustomValueSetEvent) => {
    this.items = [...this.items, event.detail];
  }}"
></vaadin-combo-box>

<vaadin-combo-box
  label="Choose doctor"
  item-label-path="displayName"
  .filteredItems="${this.filteredItems}"
  style="--vaadin-combo-box-overlay-width: 16em"
  @filter-changed="${this.filterChanged}"
  ${comboBoxRenderer(this.renderer, [])}
></vaadin-combo-box>

...

// NOTE
// We are using inline styles here to keep the example simple.
// We recommend placing CSS in a separate style sheet and
// encapsulating the styling in a new component.

private renderer: ComboBoxLitRenderer<Person> = (person) => html`
  <div style="display: flex;">
    <img
      style="height: var(--lumo-size-m); margin-right: var(--lumo-space-s);"
      src="${person.pictureUrl}"
      alt="Portrait of ${person.firstName} ${person.lastName}"
    />
    <div>
      ${person.firstName} ${person.lastName}
      <div style="font-size: var(--lumo-font-size-s); color: var(--lumo-secondary-text-color);">
        ${person.profession}
      </div>
    </div>
  </div>
`;

<vaadin-combo-box
  auto-open-disabled
  label="Country"
  item-label-path="name"
  item-value-path="id"
  .items="${this.items}"
></vaadin-combo-box>

<vaadin-combo-box
  style="--vaadin-combo-box-overlay-width: 350px"
  label="Employee"
  item-label-path="displayName"
  item-value-path="id"
  .items="${this.items}"
></vaadin-combo-box>

<vaadin-combo-box
  placeholder="Select employee"
  label="Employee"
  item-label-path="displayName"
  item-value-path="id"
  .items="${this.items}"
></vaadin-combo-box>

@customElement('combo-box-filtering-2')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  @state()
  private allItems: Country[] = [];

  @state()
  private filteredItems: Country[] = [];

  protected override async firstUpdated() {
    const countries = await getCountries();
    this.allItems = countries;
    this.filteredItems = countries;
  }

  protected override render() {
    return html`
      <vaadin-combo-box
        label="Country"
        item-label-path="name"
        item-value-path="id"
        .filteredItems="${this.filteredItems}"
        @filter-changed="${this.filterChanged}"
      ></vaadin-combo-box>
    `;
  }

  private filterChanged(event: ComboBoxFilterChangedEvent) {
    const filter = event.detail.value;
    this.filteredItems = this.allItems.filter(({ name }) =>
      name.toLowerCase().startsWith(filter.toLowerCase())
    );
  }
}