Package com.vaadin.flow.component.combobox

Class ComboBox<T>

java.lang.Object
com.vaadin.flow.component.Component
com.vaadin.flow.component.AbstractField<ComboBox<T>,T>
com.vaadin.flow.component.AbstractSinglePropertyField<ComboBox<T>,T>
com.vaadin.flow.component.combobox.ComboBoxBase<ComboBox<T>,T,T>
com.vaadin.flow.component.combobox.ComboBox<T>
Type Parameters:
T - the type of the items to be selectable from the combo box
All Implemented Interfaces:
AttachNotifier, BlurNotifier<ComboBox<T>>, DetachNotifier, Focusable<ComboBox<T>>, FocusNotifier<ComboBox<T>>, HasAriaLabel, HasElement, HasEnabled, HasHelper, HasLabel, HasPlaceholder, HasSize, HasStyle, HasTheme, HasValidation, HasValue<AbstractField.ComponentValueChangeEvent<ComboBox<T>,T>,T>, HasValueAndElement<AbstractField.ComponentValueChangeEvent<ComboBox<T>,T>,T>, HasAllowedCharPattern, HasAutoOpen, HasClearButton, HasPrefix, HasThemeVariant<ComboBoxVariant>, HasTooltip, HasValidationProperties, InputField<AbstractField.ComponentValueChangeEvent<ComboBox<T>,T>,T>, HasValidator<T>, HasDataView<T,String,ComboBoxDataView<T>>, HasLazyDataView<T,String,ComboBoxLazyDataView<T>>, HasListDataView<T,ComboBoxListDataView<T>>, Serializable
@Tag("vaadin-combo-box") @NpmPackage(value="@vaadin/combo-box", version="25.0.0-beta4") @JsModule("@vaadin/combo-box/src/vaadin-combo-box.js") @JsModule("./flow-component-renderer.js") @JsModule("./comboBoxConnector.js") public class ComboBox<T> extends ComboBoxBase<ComboBox<T>,T,T> implements HasPrefix, HasThemeVariant<ComboBoxVariant>
Combo Box allows the user to choose a value from a filterable list of options presented in an overlay.

ComboBox 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).

ComboBox can do filtering either in the browser or in the server. When ComboBox 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(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

Combo Box 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 ComboBox.ComboBoxI18n.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: