ListBox

Description #

<vaadin-list-box> is a Web Component for creating menus.

<vaadin-list-box selected="2">
  <vaadin-item>Item 1</vaadin-item>
  <vaadin-item>Item 2</vaadin-item>
  <vaadin-item>Item 3</vaadin-item>
  <vaadin-item>Item 4</vaadin-item>
</vaadin-list-box>

Styling #

The following shadow DOM parts are available for styling:

See Styling Components documentation.

Properties #

disabled #

Type: boolean

If true, the user cannot interact with this element. When the element is disabled, the selected item is not updated when selected property is changed.

items #

Type: Element[] | undefined

The list of items from which a selection can be made. It is populated from the elements passed to the light DOM, and updated dynamically when adding or removing items.

The item elements must implement Vaadin.ItemMixin.

Note: unlike <vaadin-combo-box>, this property is read-only, so if you want to provide items by iterating array of data, you have to use dom-repeat and place it to the light DOM.

multiple #

Type: boolean | null | undefined

Specifies that multiple options can be selected at once.

selected #

Type: number | null | undefined

The index of the item selected in the items array. Note: Not updated when used in multiple selection mode.

selectedValues #

Type: number[] | null | undefined

Array of indexes of the items selected in the items array Note: Not updated when used in single selection mode.

Methods #

focus #

Type: (options?: FocusOptions | undefined) => void

Events #

items-changed #

Type: ListBoxItemsChangedEvent

Fired when the items property changes.

selected-changed #

Type: ListBoxSelectedChangedEvent

Fired when the selection is changed. Not fired when used in multiple selection mode.

selected-values-changed #

Type: ListBoxSelectedValuesChangedEvent

Fired when the selection is changed. Not fired in single selection mode.

Types #

ListBoxItemsChangedEvent #

/**
 * Fired when the `items` property changes.
 */
export type ListBoxItemsChangedEvent = CustomEvent<{ value: Element[] }>;

ListBoxSelectedChangedEvent #

/**
 * Fired when the `selected` property changes.
 */
export type ListBoxSelectedChangedEvent = CustomEvent<{ value: number }>;

ListBoxSelectedValuesChangedEvent #

/**
 * Fired when the `selectedValues` property changes.
 */
export type ListBoxSelectedValuesChangedEvent = CustomEvent<{ value: number[] }>;