<vaadin-select>

<vaadin-select> is a Web Component for selecting values from a list of items.

Items

Use the items property to define possible options for the select:

<vaadin-select id="select"></vaadin-select>

const select = document.querySelector('#select');
select.items = [
  { label: 'Most recent first', value: 'recent' },
  { component: 'hr' },
  { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },
  { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },
  { component: 'hr' },
  { label: 'Price: low to high', value: 'price-asc', disabled: true },
  { label: 'Price: high to low', value: 'price-desc', disabled: true }
];

Rendering

Alternatively, the content of the select can be populated by using a slotted <vaadin-select-list-box> with <vaadin-select-item> children:

<vaadin-select>
  <vaadin-select-list-box slot="overlay">
    <vaadin-select-item value="recent">Most recent first</vaadin-select-item>
    <vaadin-select-item value="rating-asc">Rating: low to high</vaadin-select-item>
    <vaadin-select-item value="rating-desc">Rating: high to low</vaadin-select-item>
  </vaadin-select-list-box>
</vaadin-select>

• Hint: By setting the label property of inner vaadin-items you will be able to change the visual representation of the selected value in the input part.

Renderer (deprecated)

The content of the select can also be populated by using the renderer callback function, although this approach is deprecated in favor of the items property or a slotted <vaadin-select-list-box>.

The renderer function provides root, select arguments. Generate DOM content, append it to the root element and control the state of the host element by accessing select.

const select = document.querySelector('#select');
select.renderer = function(root, select) {
  const listBox = document.createElement('vaadin-list-box');
  // append 3 <vaadin-item> elements
  ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {
    const item = document.createElement('vaadin-item');
    item.textContent = name;
    item.setAttribute('label', name)
    listBox.appendChild(item);
  });

  // update the content
  root.appendChild(listBox);
};

Renderer is called on initialization of new select and on its opening. DOM generated during the renderer call can be reused in the next renderer call and will be provided with the root argument. On first call it will be empty.

Styling

The following shadow DOM parts are available for styling:

Part name	Description
label	The label element
input-field	The element that wraps prefix, value and toggle button
field-button	Set on the toggle button
error-message	The error message element
helper-text	The helper text element wrapper
required-indicator	The required state indicator element
toggle-button	The toggle button
backdrop	Backdrop of the overlay
overlay	The overlay container
content	The overlay content

The following state attributes are available for styling:

Attribute	Description
disabled	Set when the element is disabled
has-value	Set when the element has a value
has-label	Set when the element has a label
has-helper	Set when the element has helper text or slot
has-error-message	Set when the element has an error message
invalid	Set when the element is invalid
focused	Set when the element is focused
focus-ring	Set when the element is keyboard focused
readonly	Set when the element is readonly
opened	Set when the overlay is opened
phone	Set when the overlay is shown in phone mode

The following custom CSS properties are available for styling:

Custom CSS property
--vaadin-field-default-width
--vaadin-input-field-background
--vaadin-input-field-border-color
--vaadin-input-field-border-radius
--vaadin-input-field-border-width
--vaadin-input-field-bottom-end-radius
--vaadin-input-field-bottom-start-radius
--vaadin-input-field-button-text-color
--vaadin-input-field-container-gap
--vaadin-input-field-disabled-background
--vaadin-input-field-disabled-text-color
--vaadin-input-field-error-color
--vaadin-input-field-error-font-size
--vaadin-input-field-error-font-weight
--vaadin-input-field-error-line-height
--vaadin-input-field-gap
--vaadin-input-field-helper-color
--vaadin-input-field-helper-font-size
--vaadin-input-field-helper-font-weight
--vaadin-input-field-helper-line-height
--vaadin-input-field-label-color
--vaadin-input-field-label-font-size
--vaadin-input-field-label-font-weight
--vaadin-input-field-label-line-height
--vaadin-input-field-padding
--vaadin-input-field-placeholder-color
--vaadin-input-field-required-indicator
--vaadin-input-field-required-indicator-color
--vaadin-input-field-top-end-radius
--vaadin-input-field-top-start-radius
--vaadin-input-field-value-color
--vaadin-input-field-value-font-size
--vaadin-input-field-value-font-weight
--vaadin-input-field-value-line-height
--vaadin-item-overlay-padding
--vaadin-select-overlay-width

Internal components

In addition to <vaadin-select> itself, the following internal components are used and themable:

• <vaadin-select-value-button> - has the same API as <vaadin-button>.
• <vaadin-select-list-box> - a list-box element.
• <vaadin-select-item> - an item element.

See Styling Components documentation.