List component

Vertical list

A vertical list displays a list of repeating items in a vertical stack. It uses a single reusable list item template, and is best for longer scrolling screens like task lists or news feeds.

Best for: General-purpose vertical content (e.g., task lists, user comments). View type: Vertical list Properties:

• Separator width, color, inset

• Gap between list items

• Option to reverse scroll direction

Section list

A section list lets you group list items by a field (e.g., category or date). It includes two templates: a section header and list item.

Best for: Lists with grouped content (e.g., contacts grouped by letter) View type: Section list Properties:

• Separator width, color, inset

• Gap between items

• Group by: field used for grouping

Horizontal list

A horizontal-scrolling list that shows items side by side. Cannot be used as a full view, only as an element inside another view.

Best for: Scrolling media like images, tags, or categories Usage: Can be used on non-list views or inside vertical/section lists Properties:

• Gap between items (px)

Short list

Loads all list data at once (no lazy loading), making it better for short or frequently reused lists.

Best for: Displaying small lists (e.g., category filters) Key considerations:

• Can be used multiple times per view

• Avoid using for large datasets

Selectable list

An input element that lets users pick one or more values from a list. Comes with built-in states for validation, styling, and behavior.

Best for: Filters, selection menus, multi-choice inputs Behavior:

• Single or multi-select

• Optional selection limits

• Optional required setting for validation Workflow actions:

• Set value, select/unselect all, clear list, scroll to entry Properties:

• List of items

• Selected/unselected items

• Min/max/exact number of selections

List item swipe actions

Enable swipe gestures to trigger workflows from list items.

Best for: Mobile-native UX (e.g., swipe to delete/complete) Supported in: Vertical and section lists Features:

• Leading and trailing swipe actions

• Optional full-swipe to trigger

• Built-in animations

• Up to 3 actions per side

Customizable:

• Icon, label, background, font, alignment, and padding

List headers and footers

Vertical and section lists support optional header and footer content areas for non-list elements like titles or descriptions.

How to use:

• Click the "+" icons at the top or bottom of the list on the canvas

• Add standard visual elements (no lists inside lists)

Note: These areas do not have independent layout or styling controls.