Tracks multiple selection state for a list-like element


Purpose: Tracks multiple selection state for a list-like element.

This mixin works in the middle of the Elix render pipeline:

events → methodssetState → render DOM → post-render

Expects the component to provide:

Provides the component with:

  • selectedFlags state member. This is an array of boolean values the same dimensions as items. If the nth element of items is selected, the nth element of selectedFlags will be true.
  • selectedItems state member. This is an array containing the subset of items which are currently selected.
  • internal.toggleSelectedFlag method that can be used to toggle the selectedFlags value for a specific index.


import ContentItemsMixin from "elix/src/base/ContentItemsMixin.js";
import ItemsMultiSelectMixin from "elix/src/base/ItemsMultiSelectMixin.js";

class MyElement extends ContentItemsMixin(ItemsMultiSelectMixin(HTMLElement)) {}

This mixin is designed to be used in conjunction with MultiSelectToggleMixin, which provides mouse and keyboard means of toggling the selected state of the current item.

This mixin is often used with MultiSelectAPIMixin, but the two mixins are provided separately to give you control over whether you want to publicly expose a multi-select API on your list-like component.


Used by classes MultiSelectListBox and PlainMultiSelectListBox.

[internal.toggleSelectedFlag](index, toggle) method

Toggle the element of the selectedItemFlags array with the given index.

If the toggle parameter is omitted, the indicated flag is flipped. If a boolean value is supplied for toggle, the flag is set to that value.


  • index: numberthe index into the selectedItemFlags array
  • toggle: booleanif supplied, the value to set the flag to