MultiselectComboBox

A multi select combo box component for Vaadin Flow.

Integration of of the multiselect-combo-box web component.

Live Demo ↗

Install

Add the multiselect-combo-box-flow dependency to your pom.xml file:

<dependency>
   <groupId>org.vaadin.gatanaso</groupId>
   <artifactId>multiselect-combo-box-flow</artifactId>
   <version>2.0.0</version>
</dependency>

Add the vaadin-addons repository:

<repository>
   <id>vaadin-addons</id>
   <url>http://maven.vaadin.com/vaadin-addons</url>
</repository>

Basic Usage

Create a MultiselectComboBox and add items

MultiselectComboBox<String> multiselectComboBox = new MultiselectComboBox();

multiselectComboBox.setLabel("Select items");

multiselectComboBox.setItems("Item 1", "Item 2", "Item 3", "Item 4");

Add a value change listener (invoked when the selected items/value is changed):

multiselectComboBox.addValueChangeListener(event -> {
    // handle value change
});

Get the selected items/value:

// set of selected values, or an empty set if none selected
Set<String> value = multiselectComboBox.getValue();

MultiselectComboBox also implements the MultiSelect interface, which makes it easy to listen for selection changes:

multiselectComboBox.addSelectionListener(event -> {
   event.getAddedSelection(); // get added items
   event.getRemovedSelection() // get removed items
});

Object items

The MultiselectComboBox supports object items. Given the following User class:

class User {
    private String name;
    private String username;
    private String email;

    public User(String name, String username, String email) {
        this.username = username;
        this.email = email;
    }

    // getters and setters intentionally omitted for brevity

    @Override
    public String toString() {
        return name;
    }
}

Create a MultiselectComboBox of Users:

MultiselectComboBox<User> multiselectComboBox = new MultiselectComboBox();
    
multiselectComboBox.setLabel("Select users");
    
List<User> users = Arrays.asList(
    new User("Leanne Graham","leanne","leanne@demo.dev"),
    new User("Ervin Howell","ervin","ervin@demo.dev"),
    new User("Samantha Doe","samantha","samantha@demo.dev")
);

// by default uses `User.toString()` to generate item labels
multiselectComboBox.setItems(users);

The MultiselectComboBox uses the toString() method to generate the item labels by default. This can be overridden by setting an item label generator:

// use the user email as an item label
multiselectComboBox.setItemLabelGenerator(User::getEmail)

Version information

• 2.x.x - the version for Vaadin 14
• 1.x.x. - the version for Vaadin 13 and Vaadin 12

Vaadin 12 support

To use this component in a Vaadin 12+ project, explicitly override the vaadin-combo-box dependency version by adding the following to your pom.xml file:

<dependency>
	<groupId>org.webjars.bowergithub.vaadin</groupId>
	<artifactId>vaadin-combo-box</artifactId>
	<version>4.2.7</version>
</dependency>

Optionally, to always use the latest version, a range can be specified as follows:

<version>[4.2.7, 5)</version>

Branch information

• master the latest version for Vaadin 14
• V13 the version for Vaadin 13 and Vaadin 12

Running demos locally

1. Fork the multiselect-combo-box-flow repository and clone it locally.
2. Build the project: mvn clean install
3. Start the test/demo server: mvn jetty:run
4. Navigate to http://localhost:8080 to view the demo.

Web Component

The <multiselect-combo-box> web component is available on webcomponents.org, the Vaadin Directory and GitHub.