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 selection and accommodate filtering with filter.
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
| Key | Function |
|---|---|
Arrow down | Navigates to the next calcite-list-item. |
Arrow up | Navigates to the previous calcite-list-item. |
Arrow right | Navigates 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 left | Navigates 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. |
Home | Navigates to the first calcite-list-item. |
End | Navigates to the last calcite-list-item. |
Tab | Navigates 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 Shift | Navigates 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. |
Space | When the component is drag and a calcite-list-item's move handle is focused, enables moving the item's placement using the Arrow down and Arrow up keys. |