List

List organizes list items, grouped items, and their actions.

Overview

Lists can group List Items with List Groups, and leverage slots to include actionable or supplemental elements, such as Actions and Icons. Lists and List Items can support selection workflows using selectionMode and accommodate filtering with filterEnabled.

Additional functionality, such as sorting or removing items in a list will be added in the near future. In the meantime, use the deprecated Value List.

Usage

  • Format a series of line items
  • Grouping line items

Sample

Accessibility

Keyboard navigation

KeyFunction
Arrow downNavigates to the next calcite-list-item.
Arrow upNavigates to the previous calcite-list-item.
Arrow rightNavigates to the next focusable slotted content in the calcite-list-item. If focused on a calcite-list-item with nested calcite-list-items, will expand the nested calcite-list-items.
Arrow leftNavigates to the previous focusable slotted content in the calcite-list-item. If focused on a calcite-list-item with nested calcite-list-items, will collapse the nested calcite-list-items.
HomeNavigates to the first calcite-list-item.
EndNavigates to the last calcite-list-item.
TabNavigates to the next calcite-list-item child calcite-action. If the currently focused calcite-action is the last item, the focus will leave the component.
Tab and ShiftNavigates to the next calcite-list-item child calcite-action. If the currently focused calcite-action is the last item, the focus will leave the component.
SpaceWhen the component is dragEnabled and a calcite-list-item's move handle is focused, enables moving the item's placement using the Arrow down and Arrow up keys.

API reference

Properties

Slots

Events

Methods

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.