Docs

Vaadin 8 reached End of Life on February 21, 2022. Discover how to make your Vaadin 8 app futureproof →

Docs

ListSelect

Demo

The ListSelect component is list box that shows the selectable items in a vertical list. If the number of items exceeds the height of the component, a scrollbar is shown. The component allows selecting multiple values.

// Create the selection component
ListSelect<String> select = new ListSelect<>("The List");

// Add some items
select.setItems("Mercury", "Venus", "Earth", ...);

// Show 5 items and a scrollbar if there are more
select.setRows(5);

select.addValueChangeListener(event -> {
    Set<String> selected = event.getNewSelection();
    Notification.show(selected.size() + " items.");
});

The number of visible items is set with setRows().

listselect basic
The ListSelect Component

Common selection component features are described in "Selection Components".

CSS Style Rules

.v-select {}
  .v-select-select {}
    option {}

The component has an overall v-select style. The native <select> element has v-select-select style. The items are represented as <option> elements.