Select

Common Input Field Features
Dividers
Disabled Items
Placeholder
Empty Selection Item
Custom Item Label
Custom Item Presentation
Best Practices
Related Components

Select allows users to choose a single value from a list of options presented in an overlay.

Source code

SelectBasic.javapackage com.vaadin.demo.component.select;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.select.Select;
import com.vaadin.flow.router.Route;

@Route("select-basic")
public class SelectBasic extends Div {

  public SelectBasic() {
    // tag::snippet[]
    Select<String> select = new Select<>();
    select.setLabel("Sort by");
    select.setItems("Most recent first", "Rating: high to low",
      "Rating: low to high", "Price: high to low", "Price: low to high");
    select.setValue("Most recent first");

    add(select);
    // end::snippet[]
  }

}

The dropdown can be opened with a click, up/down arrow keys, or by typing the initial character for one of the options.

Common Input Field Features

Select includes all Text Field and shared input field features.

Dividers

Dividers can be used to group related options. Use dividers sparingly to avoid creating unnecessary visual clutter.

Open in a
new tab

Source code

SelectDividers.javapackage com.vaadin.demo.component.select;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Hr;
import com.vaadin.flow.component.select.Select;
import com.vaadin.flow.router.Route;

@Route("select-dividers")
public class SelectDividers extends Div {

  public SelectDividers() {
    // tag::snippet[]
    Select<String> select = new Select<>();
    select.setLabel("Sort by");
    select.setItems("Most recent first", "Rating: high to low",
      "Rating: low to high", "Price: high to low", "Price: low to high");
    select.addComponents("Most recent first", new Hr());
    select.addComponents("Rating: low to high", new Hr());
    select.setValue("Most recent first");

    add(select);
    // end::snippet[]
  }

}

Note	Use Combo Box for long lists Please note that for large data sets it is preferable to use Combo Box instead of Select, as it allows users to filter the list of options.

Disabled Items

Items can be disabled. This prevents users from selecting them, while still showing that these items would be available for selection under different circumstances.

Open in a
new tab

Source code

SelectDisabled.javapackage com.vaadin.demo.component.select;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.select.Select;
import com.vaadin.flow.router.Route;

@Route("select-disabled")
public class SelectDisabled extends Div {

  public SelectDisabled() {
    // tag::snippet[]
    Select<String> select = new Select<>();
    select.setLabel("Size");
    select.setItems("XS (out of stock)", "S", "M", "L", "XL");
    select.setItemEnabledProvider(item -> !"XS (out of stock)".equals(item));
    select.setValue("XL");

    add(select);
    // end::snippet[]
  }

}

Caution

Accessibility

Some assistive technologies might not announce disabled options.

Placeholder

Use the placeholder feature to provide an inline text prompt for the field. Do not create, or use, a separate item for this purpose.

Open in a
new tab

Source code

SelectPlaceholder.javapackage com.vaadin.demo.component.select;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.select.Select;
import com.vaadin.flow.router.Route;

@Route("select-placeholder")
public class SelectPlaceholder extends Div {

  public SelectPlaceholder() {
    // tag::snippet[]
    Select<String> select = new Select<>();
    select.setLabel("Size");
    select.setItems("XS", "S", "M", "L", "XL");
    select.setPlaceholder("Select size");

    add(select);
    // end::snippet[]
  }

}

Empty Selection Item

An empty item can be set as the first option. Use it in cases where you want to allow users to clear their selection. The value of the empty item is represented as null.

Open in a
new tab

Source code

SelectEmptySelection.javapackage com.vaadin.demo.component.select;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.select.Select;
import com.vaadin.flow.router.Route;

@Route("select-empty-selection")
public class SelectEmptySelection extends Div {

  public SelectEmptySelection() {
    Select<String> select = new Select<>();
    // tag::snippet[]
    select.setEmptySelectionAllowed(true);
    // end::snippet[]
    select.setLabel("Size");
    select.setItems("XS", "S", "M", "L", "XL");
    select.setPlaceholder("Select size");

    add(select);
  }

}

Customizing Empty Selection Caption

The label for the empty item is customizable.

The caption set replaces the placeholder for the empty selection item.

Open in a
new tab

Source code

SelectEmptySelectionCaption.javapackage com.vaadin.demo.component.select;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.select.Select;
import com.vaadin.flow.router.Route;

@Route("select-empty-selection-caption")
public class SelectEmptySelectionCaption extends Div {

  public SelectEmptySelectionCaption() {
    Select<String> select = new Select<>();
    // tag::snippet[]
    select.setEmptySelectionAllowed(true);
    select.setEmptySelectionCaption("Unknown size");
    // end::snippet[]
    select.setLabel("Size");
    select.setItems("XS", "S", "M", "L", "XL");

    add(select);
  }

}

Custom Item Label

When using complex values, a label can be set to represent the item value as plain text.

Open in a
new tab

Source code

SelectComplexValueLabel.javapackage com.vaadin.demo.component.select;

import com.vaadin.demo.domain.DataService;
import com.vaadin.demo.domain.Person;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.select.Select;
import com.vaadin.flow.router.Route;

import java.util.List;

@Route("select-complex-value-label")
public class SelectComplexValueLabel extends Div {

  public SelectComplexValueLabel() {
    // tag::snippet[]
    Select<Person> select = new Select<>();
    select.setLabel("Assignee");
    // Display full name of the person as item text and selected value label
    select.setItemLabelGenerator(Person::getFullName);

    List<Person> people = DataService.getPeople(5);
    select.setItems(people);
    // end::snippet[]

    add(select);
  }

}
Person.javapackage com.vaadin.demo.domain;

import java.time.LocalDate;
import java.util.Date;


// tag::snippet[]
public class Person {

  private String firstName;

  private String lastName;

  private String email;

  private Date birthday;

  private Integer id;

  private boolean subscriber;

  private String membership;

  private String pictureUrl;

  private String profession;

  private Address address;

  private Integer managerId;

  private boolean manager;

  private String status;

  public String getFirstName() {
    return firstName;
  }

  public void setFirstName(String firstName) {
    this.firstName = firstName;
  }

  public String getLastName() {
    return lastName;
  }

  public void setLastName(String lastName) {
    this.lastName = lastName;
  }

  public String getFullName() {
    return firstName + " " + lastName;
  }

  public String getEmail() {
    return email;
  }

  public void setEmail(String email) {
    this.email = email;
  }

  public Date getBirthday() {
    return birthday;
  }

  public void setBirthday(Date birthday) {
    this.birthday = birthday;
  }

  public boolean isSubscriber() {
    return subscriber;
  }

  public void setSubscriber(boolean subscriber) {
    this.subscriber = subscriber;
  }

  public String getMembership() {
    return membership;
  }

  public void setMembership(String membership) {
    this.membership = membership;
  }

  public String getPictureUrl() {
    return pictureUrl;
  }

  public void setPictureUrl(String pictureUrl) {
    this.pictureUrl = pictureUrl;
  }

  public String getProfession() {
    return profession;
  }

  public void setProfession(String profession) {
    this.profession = profession;
  }

  public Address getAddress() {
    return address;
  }

  public void setAddress(Address address) {
    this.address = address;
  }

  public Integer getId() {
    return id;
  }

  public void setId(Integer id) {
    this.id = id;
  }

  @Override
  public int hashCode() {
    return id;
  }

  @Override
  public boolean equals(Object obj) {
    if (this == obj) {
      return true;
    }
    if (!(obj instanceof Person)) {
      return false;
    }
    Person other = (Person) obj;
    return id == other.id;
  }

  public Integer getManagerId() {
    return managerId;
  }

  public void setManagerId(Integer managerId) {
    this.managerId = managerId;
  }

  public boolean isManager() {
    return manager;
  }

  public void setManager(boolean manager) {
    this.manager = manager;
  }

  public String getStatus() {
    return status;
  }

  public void setStatus(String status) {
    this.status = status;
  }
}
// end::snippet[]

When using custom item renderers with rich content, a label can be set to represent the item value when it is selected.

Open in a
new tab

Source code

SelectCustomRendererLabel.javapackage com.vaadin.demo.component.select;

import com.vaadin.demo.domain.DataService;
import com.vaadin.demo.domain.Person;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Image;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.FlexLayout;
import com.vaadin.flow.component.select.Select;
import com.vaadin.flow.data.renderer.ComponentRenderer;
import com.vaadin.flow.router.Route;

import java.util.List;

@Route("select-custom-renderer-label")
public class SelectCustomRendererLabel extends Div {

  public SelectCustomRendererLabel() {
    // tag::snippet[]
    Select<Person> select = new Select<>();
    select.setLabel("Assignee");
    // Use a custom renderer for items in the dropdown
    select.setRenderer(SelectCustomRendererLabel.createPersonRenderer());
    // Display full name of the person as selected value label
    select.setItemLabelGenerator(Person::getFullName);

    List<Person> people = DataService.getPeople(5);
    select.setItems(people);
    // end::snippet[]

    add(select);
  }

  private static ComponentRenderer<FlexLayout, Person> createPersonRenderer() {
    return new ComponentRenderer<>(person -> {
      FlexLayout wrapper = new FlexLayout();
      wrapper.setAlignItems(FlexComponent.Alignment.CENTER);

      // NOTE
      // We are using inline styles here to keep the example simple.
      // We recommend placing CSS in a separate style sheet and to
      // encapsulating the styling in a new component.

      Image image = new Image();
      image.setSrc(person.getPictureUrl());
      image.setAlt("Portrait of " + person.getFirstName() + " " + person.getLastName());
      image.setWidth("var(--lumo-size-m)");
      image.getStyle().set("margin-right", "var(--lumo-space-s)");

      Div info = new Div();
      info.setText(person.getFirstName() + " " + person.getLastName());

      Div profession = new Div();
      profession.setText(person.getProfession());
      profession.getStyle().set("font-size", "var(--lumo-font-size-s)");
      profession.getStyle().set("color", "var(--lumo-secondary-text-color)");
      info.add(profession);

      wrapper.add(image, info);
      return wrapper;
    });
  }

}
Person.javapackage com.vaadin.demo.domain;

import java.time.LocalDate;
import java.util.Date;


// tag::snippet[]
public class Person {

  private String firstName;

  private String lastName;

  private String email;

  private Date birthday;

  private Integer id;

  private boolean subscriber;

  private String membership;

  private String pictureUrl;

  private String profession;

  private Address address;

  private Integer managerId;

  private boolean manager;

  private String status;

  public String getFirstName() {
    return firstName;
  }

  public void setFirstName(String firstName) {
    this.firstName = firstName;
  }

  public String getLastName() {
    return lastName;
  }

  public void setLastName(String lastName) {
    this.lastName = lastName;
  }

  public String getFullName() {
    return firstName + " " + lastName;
  }

  public String getEmail() {
    return email;
  }

  public void setEmail(String email) {
    this.email = email;
  }

  public Date getBirthday() {
    return birthday;
  }

  public void setBirthday(Date birthday) {
    this.birthday = birthday;
  }

  public boolean isSubscriber() {
    return subscriber;
  }

  public void setSubscriber(boolean subscriber) {
    this.subscriber = subscriber;
  }

  public String getMembership() {
    return membership;
  }

  public void setMembership(String membership) {
    this.membership = membership;
  }

  public String getPictureUrl() {
    return pictureUrl;
  }

  public void setPictureUrl(String pictureUrl) {
    this.pictureUrl = pictureUrl;
  }

  public String getProfession() {
    return profession;
  }

  public void setProfession(String profession) {
    this.profession = profession;
  }

  public Address getAddress() {
    return address;
  }

  public void setAddress(Address address) {
    this.address = address;
  }

  public Integer getId() {
    return id;
  }

  public void setId(Integer id) {
    this.id = id;
  }

  @Override
  public int hashCode() {
    return id;
  }

  @Override
  public boolean equals(Object obj) {
    if (this == obj) {
      return true;
    }
    if (!(obj instanceof Person)) {
      return false;
    }
    Person other = (Person) obj;
    return id == other.id;
  }

  public Integer getManagerId() {
    return managerId;
  }

  public void setManagerId(Integer managerId) {
    this.managerId = managerId;
  }

  public boolean isManager() {
    return manager;
  }

  public void setManager(boolean manager) {
    this.manager = manager;
  }

  public String getStatus() {
    return status;
  }

  public void setStatus(String status) {
    this.status = status;
  }
}
// end::snippet[]

Note

Ensure item label generator handles null values

When using setItemLabelGenerator in combination with setEmptySelectionAllowed, ensure that the implementation is capable of handling null values, as the empty selection item has the value null.

Source code

Javaselect.setEmptySelectionAllowed(true);
select.setItemLabelGenerator(person -> {
  if (person == null) {
      return "No assignee";
  }
  return person.getFullName();
});

The same applies when using a data source that may contain null values.

Custom Item Presentation

Items can be rendered with rich content instead of plain text. This can be useful to provide information in a more legible fashion than appending it to the item text.

Open in a
new tab

Source code

SelectPresentation.javapackage com.vaadin.demo.component.select;

import com.vaadin.demo.domain.DataService;
import com.vaadin.demo.domain.Person;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Image;
import com.vaadin.flow.component.orderedlayout.FlexComponent.Alignment;
import com.vaadin.flow.component.orderedlayout.FlexLayout;
import com.vaadin.flow.component.select.Select;
import com.vaadin.flow.data.renderer.ComponentRenderer;
import com.vaadin.flow.router.Route;

import java.util.List;

@Route("select-presentation")
public class SelectPresentation extends Div {

  private List<Person> items = DataService.getPeople(5);

  public SelectPresentation() {
    // tag::snippet[]
    Select<Person> select = new Select<>();
    select.setLabel("Choose doctor");
    select.setRenderer(new ComponentRenderer<>(person -> {
        FlexLayout wrapper = new FlexLayout();
        wrapper.setAlignItems(Alignment.CENTER);

        // NOTE
        // We are using inline styles here to keep the example simple.
        // We recommend placing CSS in a separate style sheet and to
        // encapsulating the styling in a new component.

        Image image = new Image();
        image.setSrc(person.getPictureUrl());
        image.setAlt("Portrait of " + person.getFirstName() + " " + person.getLastName());
        image.setWidth("var(--lumo-size-m)");
        image.getStyle().set("margin-right", "var(--lumo-space-s)");

        Div info = new Div();
        info.setText(person.getFirstName() + " " + person.getLastName());

        Div profession = new Div();
        profession.setText(person.getProfession());
        profession.getStyle().set("font-size", "var(--lumo-font-size-s)");
        profession.getStyle().set("color", "var(--lumo-secondary-text-color)");
        info.add(profession);

        wrapper.add(image, info);
        return wrapper;
    }));
    select.setItems(items);
    add(select);
    // end::snippet[]
  }

}

Best Practices

Set a Default Value

When applicable, set the most common choice as the default value.

Select is an input field component, not a generic menu component. Use Menu Bar to create overlays for actions.

Component	Usage recommendations
Radio Button	Better accessibility than Select, as all options are visible without user interaction.
Combo Box	Filterable list of options. Appropriate for large sets of options. Supports lazy loading entry of custom values.
List Box	Scrollable inline list of options. Supports single and multi-select.
Menu Bar	Overlay menus for items that trigger actions.

Component

Usage recommendations

Radio Button

Better accessibility than Select, as all options are visible without user interaction.

Combo Box

Filterable list of options. Appropriate for large sets of options. Supports lazy loading entry of custom values.

List Box

Scrollable inline list of options. Supports single and multi-select.

Menu Bar

Overlay menus for items that trigger actions.

86761DF6-1C96-47B2-8311-E777A11405C6

Docs

Docs

Select

Common Input Field Features

Dividers

Disabled Items

Placeholder

Empty Selection Item

Customizing Empty Selection Caption

Custom Item Label

Custom Item Presentation

Best Practices

Set a Default Value

Do Not Use as a Menu

Docs

Common Input Field Features

Dividers

Disabled Items

Placeholder

Empty Selection Item

Customizing Empty Selection Caption

Custom Item Label

Custom Item Presentation

Best Practices

Set a Default Value

Do Not Use as a Menu

Related Components