List Items

App Design Guides

List Items display a list of scrollable items that are laid out either horizontally or vertically.

Element placement

List items can be built with different elements and can have a maximum of 4 slots.

  • A: Icon
  • B: Caption, simple caption, or caption with subtitle
  • C: Summary
  • Tap state: The background changes color once tapped to indicate it has been selected.

Captions column

The layout consists of a captions column with two pre-defined labels. It can be extended with additional labels if needed. However, these two labels must be sufficient to cover most of the cases.

Title, Subtitle and Summary – each have a Label component with pre-defined sizes, colors, wrapping and elide, that typically handle each slot.


In a ListView, users can swipe from left to right to reveal an option to delete, or swipe right to left to reveal trailing options, such as positive actions.

API Documentation: Implement QML List Item


Trailing actions (Positive)

To reveal trailing positive actions, the user simply swipes right to left to reveal actions inside the item. Users need to swipe and then tap on the icon to execute the action.

Note: Only three contextual actions are allowed.


Leading actions (Negative)

Group property defining the options revealed when swiped from left to right. If it is empty, no option will be shown, and swipe-to-the-left will be disabled.