The selectable-items element

Overview

The <selectable-items> element provides selection functionality for any arbitrary set of elements.

Any element that is a child of the <selectable-items> element will be "selected" whenever clicked (or toggled with enter/select keys), and given a tabIndex attribute for keyboard navigation.

Basic Example

The <selectable-items> element provides select functionality for any of its child elements.

When a child element has been selected, it will have it's aria-selected attribute set to option, and the class selected will be applied.

Both of these effects can be prevented by using the preventDefault function on the <selectable-items> element's change event.

Inline

Children of the <selectable-items> element will be rendered inline, if they are inline elements like <span>.

A B C D E

Block

Children of the <selectable-items> element can also be block elements like <div>.

A
B
C
D
E

Multi-select

The <selectable-items> element can allow multiple selections by setting the element's multi attribute to true.

With multiple select active, the user can hold the Shift or Control keys to select as many as all of the items.

Item A
Item B
Item C
Item D
Item E

Events

The <selectable-items> element dispatches a change event whenever a selection is made.

In the example below, the text content of each selected item is logged any time the change event is dispatched:

Item A
Item B
Item C
Item D
Item E
Event Log
    Nested <slot>

    The <selectable-items> element can select items that are provided by a parent element using a nested <slot> element.

    In this example, the <slot> element passes its slotted items through to a <selectable-items> element in its shadow dom:

    Item A
    Item B
    Item C
    Item D
    Item E
    Event Log