Select is an input field component that allows users to choose a single value from a set of options presented in a dropdown list.

<vaadin-select
  value="recent"
  label="Sort by"
  .renderer="${guard(
    [],
    () => (root: HTMLElement) =>
      render(
        html`
          <vaadin-list-box>
            <vaadin-item value="recent">Most recent first</vaadin-item>
            <vaadin-item value="rating-desc">Rating: high to low</vaadin-item>
            <vaadin-item value="rating-asc">Rating: low to high</vaadin-item>
            <vaadin-item value="price-desc">Price: high to low</vaadin-item>
            <vaadin-item value="price-asc">Price: low to high</vaadin-item>
          </vaadin-list-box>
        `,
        root
      )
  )}"
></vaadin-select>

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.

<vaadin-select
  value="recent"
  label="Sort by"
  .renderer="${guard(
    [],
    () => (root: HTMLElement) =>
      render(
        html`
          <vaadin-list-box>
            <vaadin-item value="recent">Most recent first</vaadin-item>
            <hr />
            <vaadin-item value="rating-desc">Rating: high to low</vaadin-item>
            <vaadin-item value="rating-asc">Rating: low to high</vaadin-item>
            <hr />
            <vaadin-item value="price-desc">Price: high to low</vaadin-item>
            <vaadin-item value="price-asc">Price: low to high</vaadin-item>
          </vaadin-list-box>
        `,
        root
      )
  )}"
></vaadin-select>
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.

<vaadin-select
  label="Size"
  value="xl"
  .renderer="${guard(
    [],
    () => (root: HTMLElement) =>
      render(
        html`
          <vaadin-list-box>
            <vaadin-item value="xs" disabled>XS (out of stock)</vaadin-item>
            <vaadin-item value="s">S</vaadin-item>
            <vaadin-item value="m">M</vaadin-item>
            <vaadin-item value="l">L</vaadin-item>
            <vaadin-item value="xl">XL</vaadin-item>
          </vaadin-list-box>
        `,
        root
      )
  )}"
></vaadin-select>
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.

<vaadin-select
  label="Size"
  placeholder="Select size"
  .renderer="${guard(
    [],
    () => (root: HTMLElement) =>
      render(
        html`
          <vaadin-list-box>
            <vaadin-item value="xs">XS</vaadin-item>
            <vaadin-item value="s">S</vaadin-item>
            <vaadin-item value="m">M</vaadin-item>
            <vaadin-item value="l">L</vaadin-item>
            <vaadin-item value="xl">XL</vaadin-item>
          </vaadin-list-box>
        `,
        root
      )
  )}"
></vaadin-select>

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.

<vaadin-select label="Choose doctor" .renderer="${this.renderer}"></vaadin-select>

...

private renderer = (root: HTMLElement) => {
  render(
    html`
      <vaadin-list-box>
        ${this.people.map(
          (person) => html`
            <vaadin-item value="${person.id}">
              <!--
                NOTE
                We are using inline styles here to keep the example simple.
                We recommend placing CSS in a separate style sheet and
                encapsulating the styling in a new component.
              -->
              <div style="display: flex; align-items: center;">
                <img
                  src="${person.pictureUrl}"
                  alt="Portrait of ${person.firstName} ${person.lastName}"
                  style="width: var(--lumo-size-m); margin-right: var(--lumo-space-s);"
                />
                <div>
                  ${person.firstName} ${person.lastName}
                  <div
                    style="font-size: var(--lumo-font-size-s); color: var(--lumo-secondary-text-color);"
                  >
                    ${person.profession}
                  </div>
                </div>
              </div>
            </vaadin-item>
          `
        )}
      </vaadin-list-box>
    `,
    root
  );
};

Best Practices

Set a Default Value

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

Do Not Use as a Menu

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

ComponentUsage 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.