# 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. Loads all list data at once (no lazy loading), making it better for short or frequently reused lists.

**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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://manual.bubble.io/core-resources/elements/native-mobile-elements/list-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.