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
:
<dependency>
<groupId>org.vaadin.gatanaso</groupId>
<artifactId>multiselect-combo-box-flow</artifactId>
<version>3.0.2</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 User
s:
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
- 3.x.x - the version for Vaadin 16 and Vaadin 15
- 2.x.x - the version for Vaadin 14 (LTS)
- 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 16 and Vaadin 15V14
the version for Vaadin 14 (LTS)V13
the version for Vaadin 13 and Vaadin 12
Running demos locally
- Fork the
multiselect-combo-box-flow
repository and clone it locally. - Build the project:
mvn clean install
- Start the test/demo server:
mvn jetty:run
- 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.