Documentation

Documentation versions (currently viewingVaadin 23)

You are viewing documentation for Vaadin 23. View latest documentation

Combo Box

Combo Box allows the user to choose a value from a filterable list of options presented in an overlay. It supports lazy loading and can be configured to accept custom typed values.

Open in a
new tab
<vaadin-combo-box
  label="Country"
  item-label-path="name"
  item-value-path="id"
  .items="${this.items}"
></vaadin-combo-box>

The overlay opens when the user clicks the field using a pointing device. Using the Up/Down arrow keys or typing a character (found in at least one of the options) when the field is focused also opens the popup.

Common Input Field Features

Combo Box includes all Text Field and shared input field features.

Custom Value Entry

Combo Box can be configured to allow entering custom values that aren’t included in the list of options.

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

Allowing custom entry is useful when you need to present the most common choices but still give users the freedom to enter their own options.

Custom values can also be stored and added to the list of options:

Open in a
new tab
<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>

Custom Item Presentation

Items can be customized to display more information than a single line of text.

Open in a
new tab
<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>
`;

Use a custom filter to allow the user to search by the rendered properties. It’s recommended to make filtering case insensitive.

Auto Open

The overlay opens automatically when the field is focused using a pointer (mouse or touch), or when the user types in the field. You can disable that to only open the overlay when the toggle button or Up/Down arrow keys are pressed.

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

The width of the popup is, by default, the same width as the input field. The popup width can be overridden to any fixed width in cases where the default width is too narrow.

Open in a
new tab
<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>

Placeholder

Use the placeholder feature to provide an inline text prompt for the field. Don’t create, or use, a separate item for this purpose.

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

Custom Filtering

Combo Box’s filtering, by default, is configured to only show items that contain the entered value:

Open in a
new tab
<vaadin-combo-box
  label="Country"
  item-label-path="name"
  item-value-path="id"
  .items="${this.items}"
></vaadin-combo-box>

Custom filtering is also possible. For example, if you only want to show items that start with the user’s input:

Open in a
new tab
@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())
    );
  }
}

Usage as Autocomplete Field

As the user is typing, the Combo Box filters out the options that don’t match. Once the correct value has been found, the user can use the Up/Down arrow keys to navigate the list and the Enter key to set the value, essentially using the Combo Box as an autocomplete field.

Best Practices

Combo Box supports lazy loading for large datasets. It reduces the initial load time, consumes less bandwidth and resources.

Note
Don’t use as a menu
Combo Box is an input field component, not a generic menu component. Use the Menu Bar component to create overlays for actions.
Component Usage recommendations

Select

Simpler overlay selection field without filtering, lazy loading or custom value entry.

Radio Button

Better accessibility than Combo Box, as all options are visible without user interaction.

List Box

Scrollable inline list of options. Supports single and multi-select.

Menu Bar

Overlay menus for items that trigger actions.

1DFB67E2-2A7B-4339-8C20-FC546C664BB2