Contact us
Create app
com.vaadin.flow.component.combobox.
Package com.vaadin.flow.component.combobox

Class MultiSelectComboBox<TItem>

java.lang.Object
com.vaadin.flow.component.Component
com.vaadin.flow.component.AbstractField<C,T>
com.vaadin.flow.component.AbstractSinglePropertyField<TComponent,TValue>
com.vaadin.flow.component.combobox.ComboBoxBase<MultiSelectComboBox<TItem>,TItem,Set<TItem>>
com.vaadin.flow.component.combobox.MultiSelectComboBox<TItem>

Type Parameters:

TItem - the type of the items to be selectable from the combo box

All Implemented Interfaces:

AttachNotifier, BlurNotifier<MultiSelectComboBox<TItem>>, DetachNotifier, Focusable<MultiSelectComboBox<TItem>>, FocusNotifier<MultiSelectComboBox<TItem>>, HasAriaLabel, HasElement, HasEnabled, HasHelper, HasLabel, HasPlaceholder, HasSize, HasStyle, HasTheme, HasValidation, HasValue<AbstractField.ComponentValueChangeEvent<MultiSelectComboBox<TItem>,Set<TItem>>,Set<TItem>>, HasValueAndElement<AbstractField.ComponentValueChangeEvent<MultiSelectComboBox<TItem>,Set<TItem>>,Set<TItem>>, HasAllowedCharPattern, HasAutoOpen, HasClearButton, HasClientValidation, HasOverlayClassName, HasThemeVariant<MultiSelectComboBoxVariant>, HasTooltip, HasValidationProperties, InputField<AbstractField.ComponentValueChangeEvent<MultiSelectComboBox<TItem>,Set<TItem>>,Set<TItem>>, HasValidator<Set<TItem>>, HasDataView<TItem,String,ComboBoxDataView<TItem>>, HasLazyDataView<TItem,String,ComboBoxLazyDataView<TItem>>, HasListDataView<TItem,ComboBoxListDataView<TItem>>, MultiSelect<MultiSelectComboBox<TItem>,TItem>, Serializable

@Tag("vaadin-multi-select-combo-box") @NpmPackage(value="@vaadin/polymer-legacy-adapter",version="24.7.0-beta1") @NpmPackage(value="@vaadin/multi-select-combo-box",version="24.7.0-beta1") @JsModule("@vaadin/polymer-legacy-adapter/style-modules.js") @JsModule("@vaadin/multi-select-combo-box/src/vaadin-multi-select-combo-box.js") @JsModule("./flow-component-renderer.js") @JsModule("./comboBoxConnector.js") public class MultiSelectComboBox<TItem> extends ComboBoxBase<MultiSelectComboBox<TItem>,TItem,Set<TItem>> implements MultiSelect<MultiSelectComboBox<TItem>,TItem>, HasThemeVariant<MultiSelectComboBoxVariant>

MultiSelectComboBox allows the user to select one or more values from a filterable list of options presented in an overlay. Compared to ComboBox, MultiSelectComboBox allows to select multiple values.

MultiSelectComboBox supports lazy loading. This means that when using large data sets, items are requested from the server one "page" at a time when the user scrolls down the overlay. The number of items in one page is by default 50, and can be changed with ComboBoxBase.setPageSize(int).

MultiSelectComboBox can do filtering either in the browser or in the server. When MultiSelectComboBox has only a relatively small set of items, the filtering will happen in the browser, allowing smooth user-experience. When the size of the data set is larger than the pageSize, the webcomponent doesn't necessarily have all the data available, and it will make requests to the server to handle the filtering. Also, if you have defined custom filtering logic, with eg. ComboBoxBase.setItems(ComboBox.ItemFilter, Collection), filtering will happen in the server. To enable client-side filtering with larger data sets, you can override the pageSize to be bigger than the size of your data set. However, then the full data set will be sent to the client immediately, and you will lose the benefits of lazy loading.

Validation

MultiSelectComboBox comes with a built-in validation mechanism that verifies that the field is not empty when required is enabled.

Validation is triggered whenever the user initiates a value change, for example by selection from the dropdown or manual entry followed by Enter or blur. Programmatic value changes trigger validation as well. If validation fails, the component is marked as invalid and an error message is displayed below the input.

The required error message can be configured using either MultiSelectComboBoxI18n.setRequiredErrorMessage(String) or HasValidationProperties.setErrorMessage(String).

For more advanced validation that requires custom rules, you can use Binder. Please note that Binder provides its own API for the required validation, see asRequired().

However, if Binder doesn't fit your needs and you want to implement fully custom validation logic, you can disable the built-in validation by setting ComboBoxBase.setManualValidation(boolean) to true. This will allow you to control the invalid state and the error message manually using HasValidationProperties.setInvalid(boolean) and HasValidationProperties.setErrorMessage(String) API.

Author:

Vaadin Ltd

See Also:

Copyright © 2025. All rights reserved.