vaadin-combo-box Code Examples

Overview

The vaadin-combo-box is a combo box element combining a dropdown list with an input field for filtering the list of items. It is also a part of the vaadin-core-elements element bundle. See a detailed list of features on the vaadin-combo-box page.

The following chapters will guide you through the usage of vaadin-combo-box with code examples.

Basic Usage: Basic Usage chapter shows you how to configure the element correctly and explains the automatic sizing and alignment feature.
Value Handling: Value Handling chapter explains how you can listen for changes in the selected value and how to use the element inside a form.

Getting started

To install vaadin-combo-box to your project, you have three options. The recommended way is to use Bower.

1) Bower

Recommended way for installation is to use the Bower package manager. After creating a folder for your project, you can install the element (with all required dependencies) with the following command.

$ bower install --save vaadin-combo-box

Then use a normal HTML import to make the element available on your page.

<link rel="import" href="bower_components/vaadin-combo-box/vaadin-combo-box.html">

2) Vaadin CDN

You can also import the element without a local installation by using our CDN infrastructure.

<link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-combo-box/vaadin-combo-box.html">

3) ZIP Download

As a third option, you can also download the required files locally by downloading the latest Vaadin Core Elements bundle as a zip package.

<link rel="import" href="libs/vaadin-combo-box/vaadin-combo-box.html">

Limitations

Currently the options displayed in the dropdown list is limited to an array of String values or Objects with a toString() method. Lazy loading of the list items is not supported.

License and Source Code

The vaadin-combo-box element is licensed under the Apache License 2.0. The source code is available on the GitHub project page.