In this Vaadin tutorial, we will learn to work with the Vaadin ComboBox UI component and learn to set, filter, or add new values, and event handling on Combobox events.
Table of Contents 1. Set ComboBox Values List 2. Disable Empty/Null Selection 3. Pre-selecting value 4. Enable/Disable Values Filtering 5. Editable Vaadin ComboBox 6. Add Custom CSS Style 7. Complete Example
1. Setting Values List in Combobox
To add items to vaadin combobox component, use ComboBox.addItem()
or ComboBox.addItems()
methods.

ComboBox combobox = new ComboBox("Select your gender:"); //Add multiple items combobox.addItems("Select", "Male", "Female", "Other"); layout.addComponent(combobox);
If you want to add one item at time:
ComboBox combobox = new ComboBox("Select your gender:"); //Add one item at a time combobox.addItem("Select"); combobox.addItem("Male"); combobox.addItem("Female"); combobox.addItem("Other"); layout.addComponent(combobox);
Similarly, you can use other data structures to populate the combobox items. E.g. I have used enum type to populate vaadin combobox items.
enum Genders { MALE("Male"), FEMALE("Female"), OTHERS("Others"); private String name; private Genders(String name) { this.name = name; } @Override public String toString() { return name; } } ComboBox combobox = new ComboBox("Select your gender:"); //Add enum values combobox.addItems("Select", Genders.MALE, Genders.FEMALE, Genders.OTHERS); layout.addComponent(combobox);
2. Disable Empty/Null Selection
You noticed the first option as empty in first screen shot. If you want to remove this empty option, use combobox.setNullSelectionAllowed(false);
method.

ComboBox combobox = new ComboBox("Select your gender:"); combobox.addItems("Select", "Male", "Female", "Other"); //Remove empty option combobox.setNullSelectionAllowed(false); layout.addComponent(combobox);
3. Pre-selecting Comboboc Option
Many times you would like to pre-select some value, e.g. in case you are showing an edit form with pre-stored values in the database. In this case, use setValue()
method.

ComboBox combobox = new ComboBox("Select your gender:"); combobox.addItems("Select", "Male", "Female", "Other"); //Remove empty option combobox.setNullSelectionAllowed(false); //Pre-set some value combobox.setValue("Male"); layout.addComponent(combobox);
4. Enable/Disable Filtering
By Default, vaadin combobox components support filtering i.e. you can filter the values by typring into textbox. In case, you want control the enable/disable this feature, use combobox.setFilteringMode()
method.

There are 3 filtering modes available:
-
FilteringMode.CONTAINS
Matches any item that contains the string given in the text field part of the component.
-
FilteringMode.OFF
It makes filtering off and all items are shown all the time.
-
FilteringMode.STARTSWITH
Matches only items that begin with the given string. It is the default mode in vaadin 7.
ComboBox combobox = new ComboBox("Select your gender:"); combobox.addItems("Select", "Male", "Female", "Other"); combobox.setNullSelectionAllowed(false); //Add Filtering combobox.setFilteringMode(FilteringMode.CONTAINS); layout.addComponent(combobox);
5. Editable Combobox
In editable combobox, you can add new items from UI as well. To add new items, just type the new item caption, and press enter.
Add a NewItemHandler
instance to handle the new added item. E.g. after adding it I am selecting it as current value in combobox.

Label label = new Label(); ComboBox combobox = new ComboBox("Select your gender:"); combobox.addItems("Select", "Male", "Female", "Other"); combobox.setNullSelectionAllowed(false); //Allow new Items combobox.setNewItemsAllowed(true); combobox.setImmediate(true); combobox.setNewItemHandler(new NewItemHandler(){ private static final long serialVersionUID = 1L; @Override public void addNewItem(String newItemCaption) { combobox.addItem(newItemCaption); combobox.setValue(newItemCaption); label.setValue("You added : " + newItemCaption); } }); layout.addComponent(label); layout.addComponent(combobox);
6. Add Custom CSS Style
- The entire combobox component is enclosed in
v-filterselect
style. - The input field has
v-filterselect-input
style. - The button in the right end that opens and closes the drop-down result list has
v-filterselect-button
style. - The drop-down result list has an overall
v-filterselect-suggestpopup
style. - It contains the list of suggestions with
v-filterselect-suggestmenu
style.
Modify above CSS classes to alter the display of combobox.
7. Complete Example
package com.howtodoinjava.vaadin.demo; import com.vaadin.annotations.Theme; import com.vaadin.annotations.VaadinServletConfiguration; import com.vaadin.server.VaadinRequest; import com.vaadin.server.VaadinServlet; import com.vaadin.shared.ui.combobox.FilteringMode; import com.vaadin.ui.AbstractSelect.NewItemHandler; import com.vaadin.ui.ComboBox; import com.vaadin.ui.Label; import com.vaadin.ui.UI; import com.vaadin.ui.VerticalLayout; @Theme("mytheme") public class MyUI extends UI { private static final long serialVersionUID = 1387172685749279538L; enum Genders { MALE("Male"), FEMALE("Female"), OTHERS("Others"); private String name; private Genders(String name) { this.name = name; } @Override public String toString() { return name; } } @Override protected void init(VaadinRequest vaadinRequest) { final VerticalLayout layout = new VerticalLayout(); addListItems(layout); removeEmptySelection(layout); preSelectValue(layout); addFiltering(layout); editableCombobox(layout); layout.setMargin(true); layout.setSpacing(true); setContent(layout); } private void addListItems(VerticalLayout layout) { ComboBox combobox = new ComboBox("Select your gender:"); /* * combobox.addItem("Select"); combobox.addItem("Male"); * combobox.addItem("Female"); combobox.addItem("Other"); */ // combobox.addItems("Select", "Male", "Female", "Other"); combobox.addItems("Select", Genders.MALE, Genders.FEMALE, Genders.OTHERS); layout.addComponent(combobox); } private void removeEmptySelection(VerticalLayout layout) { ComboBox combobox = new ComboBox("Select your gender:"); combobox.addItems("Select", "Male", "Female", "Other"); //Remove empty option combobox.setNullSelectionAllowed(false); layout.addComponent(combobox); } private void preSelectValue(VerticalLayout layout) { ComboBox combobox = new ComboBox("Select your gender:"); combobox.addItems("Select", "Male", "Female", "Other"); //Remove empty option combobox.setNullSelectionAllowed(false); //Pre-set some value combobox.setValue("Male"); layout.addComponent(combobox); } private void addFiltering(VerticalLayout layout) { ComboBox combobox = new ComboBox("Select your gender:"); combobox.addItems("Select", "Male", "Female", "Other"); combobox.setNullSelectionAllowed(false); //Add Filtering combobox.setFilteringMode(FilteringMode.CONTAINS); layout.addComponent(combobox); } private void editableCombobox(VerticalLayout layout) { Label label = new Label(); ComboBox combobox = new ComboBox("Select your gender:"); combobox.addItems("Select", "Male", "Female", "Other"); combobox.setNullSelectionAllowed(false); //Allow new Items combobox.setNewItemsAllowed(true); combobox.setImmediate(true); combobox.setNewItemHandler(new NewItemHandler(){ private static final long serialVersionUID = 1L; @Override public void addNewItem(String newItemCaption) { combobox.addItem(newItemCaption); combobox.setValue(newItemCaption); label.setValue("You added : " + newItemCaption); } }); layout.addComponent(label); layout.addComponent(combobox); } @VaadinServletConfiguration(ui = MyUI.class, productionMode = false) public static class MyUIServlet extends VaadinServlet { private static final long serialVersionUID = -2718268186398688122L; } }
Happy Learning !!
References: