Exposes a public API for the selected text of a list-like element


Purpose: defines a selectedText property that reflects the text content of a selected item.

This mixin is independent of the Elix Elix render pipeline.

Expects the component to provide:

  • selectedIndex state member indicating the index of the currently selected item. This is usually provided by SingleSelectAPIMixin.
  • items state member representing the items that can be selected. This is usually provided by ContentItemsMixin.

Provides the component with:

  • selectedText property representing the text content of the currently-selected item.


import SelectedItemTextValueMixin from "elix/src/base/SelectedItemTextValueMixin.js";
class MyElement extends SelectedItemTextValueMixin(HTMLElement) {}

This mixin exists for list-like components that want to provide a more convenient way to get/set the selected item using text. It adds a selectedText property that gets the textContent of a component's selectedItem. The selectedText property can also be set to set the selection to the first item in the items collection that has the requested textContent. If the indicated text is not found in items, the selection is cleared.


Used by classes DropdownList, FilterListBox, ListBox, OptionList, PlainDropdownList, PlainFilterListBox, PlainListBox, and PlainOptionList.

getItemText(item) method

Extract the text from the given item.

The default implementation returns an item's aria-label, alt attribute, innerText, or textContent, in that order. You can override this to return the text that should be used.


  • item: Element

Returns: string

selectedText property

The text content of the selected item.

Setting this value to a string will attempt to select the first list item whose text matches that string. Setting this to a string not matching any list item will result in no selection.

Type: string