> For the complete documentation index, see [llms.txt](https://help.adalo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.adalo.com/component-basics/marketplace-components/tabbed-list.md). # Tabbed List Tabbed List combines a tab bar and a scrollable list into a single component. Switch between 2--5 tabs to instantly filter your list without any extra screens or conditional logic -- everything stays in one place. It's perfect for dashboards, scheduling apps, task managers, or anywhere you need to show the same collection from different angles. ## Getting Started Add the component to your screen, connect your collection to the **List** binding, and configure your tabs. Data loads once when the screen opens -- switching tabs filters the list client-side with no additional API calls. Set a **Filter Value** on each tab and map **Filter Field** in List Item Fields to the collection field you want to filter by. Tabs with a blank Filter Value show all records. ## Settings ### Number of Tabs How many tabs to show. Choose between 2 and 5. (default: 3) ### Tab 1 / Tab 2 / Tab 3 / Tab 4 / Tab 5 Each tab has two settings: * **Label** -- The text displayed on the tab. Use the font picker to set the typeface, size, and weight. Tabs 3--5 only appear when Number of Tabs is set to 3 or higher. * **Filter Value** -- The value this tab filters by. When a record's Filter Field matches this value, it shows under this tab. Leave blank to show all records (great for an "All" tab). ### Tab Bar * **Tab Style** -- Choose how the active tab is indicated: * *Underline* -- A line appears below the active tab (default) * *Pill* -- The active tab gets a rounded background * *Filled* -- The entire tab bar takes the active color; the active tab gets a highlight * *Text Only* -- No indicator, just color change on the label * **Underline Thickness** -- Height of the underline in pixels. (default: 3, range: 1--6, Underline style only) * **Underline Position** -- Whether the underline appears at the bottom or top of the tab bar. (default: Bottom, Underline style only) * **Pill Border Radius** -- Corner rounding of the pill background. (default: 8, range: 0--24, Pill style only) * **Show Divider** -- Shows a hairline separator between the tab bar and the list. (default: on) * **Tab Sizing** -- *Equal Width* gives every tab the same width. *Dynamic Width* sizes each tab to fit its label with horizontal padding. (default: Equal Width) ### Colors * **Tab Bar Background** -- Background color of the tab bar area. (default: #FFFFFF) * **Active Tab Background** -- Background color of the active tab. Used in Pill and Filled styles. (default: #5C5CE6) * **Inactive Tab Background** -- Background color of inactive tabs in Pill style. (default: #F0F0F0) * **Active Tab Text** -- Text color of the active tab label. (default: #5C5CE6) * **Inactive Tab Text** -- Text color of inactive tab labels. (default: #999999) * **Underline Color** -- Color of the underline indicator. (default: #5C5CE6) * **Divider Color** -- Color of the hairline between the tab bar and list. (default: #E0E0E0) * **Item Background** -- Background color of each card item. (default: #FFFFFF, Card style only) ### List Item Fields These bind to your collection. Each row in the list resolves these per-item. * **Line 1 / Line 2 / Line 3 / Line 4** -- Four lines of Magic Text per item. Any line left blank is hidden. Line 1 is typically your title; Lines 2--4 are for supporting details. * **Avatar Image URL** -- Map to an image URL field. Only visible when Show Avatar Image is on. * **Filter Field** -- The field the component compares against each tab's Filter Value. For example, map this to a "Status" or "Day of Week" field, then set each tab's Filter Value to the matching value (e.g. "Monday"). * **Tap Action** -- The action that fires when a list item is tapped. Use this to navigate to a detail screen, passing the record as context. ### Line 1 / Line 2 / Line 3 / Line 4 Style Each line has independent styling: * **Font Size** -- Size in pixels. Line 1 default: 16, Line 2: 14, Line 3: 13, Line 4: 12. * **Font Weight** -- Light, Regular, Medium, Semi Bold, or Bold. Line 1 defaults to Semi Bold; Lines 2--4 default to Regular. * **Color** -- Text color per line. Defaults cascade from dark (#111111) to light (#999999). ### Item Appearance * **Item Style** -- *Card* wraps each item in a rounded box with shadow. *Row* uses a flat layout with a divider line. (default: Card) * **Show Avatar Image** -- Reveals the avatar circle on the left of each item. (default: off) * **Card Border Radius** -- Corner rounding of card items. (default: 8, range: 0--24, Card style only) * **Item Padding** -- Internal padding of each item in pixels. (default: 12, range: 8--32) ## Actions **Tap Action** (in List Item Fields) -- Fires when the user taps a list item. Use it to link to a detail screen. The tapped record is automatically available as context for Magic Text on the target screen. ## Magic Text Outputs * **Active Tab Filter Value** -- Outputs the Filter Value of the currently active tab (empty string for tabs with no filter). Use this in an Adalo list filter on another component to sync its data with the selected tab. * **Active Tab Index** -- Outputs the tab number (1--5) of the currently active tab. Use this to drive conditional visibility or other components based on which tab is selected. ## Tips & Best Practices * **Load data once, filter client-side.** Connect the List to your full unfiltered collection and let the component do the filtering. Do not connect the Active Tab Filter Value to the same list's Adalo filter -- that causes re-fetches on every tab switch. * **Leave Tab 1 Filter Value blank** for an "All" tab that shows every record. Only tabs with a Filter Value set will filter. * **Map Filter Field to a text or number field**, not a relationship. For relationships, use a text field that stores the related record's ID or a comma-separated list of IDs. * **Use No Formatting** when mapping date fields to any of the four lines, so the raw value is passed cleanly. * **Tab labels support the font picker.** Click the styles icon next to the Label field to set typeface, size, and weight -- useful for matching your app's brand. * **Card style works best with short content.** If your items have 3--4 lines plus an image, increase Item Padding slightly and test on a small screen. * **The loading spinner** shows briefly when the screen opens or a tab is tapped. It clears automatically once data arrives, so users never see a false "No items" state. ## Example Use Cases **Conference schedule app** -- One collection of sessions with a "Day" field. Tab 1 = All (blank filter), Tab 2 = Monday, Tab 3 = Tuesday, Tab 4 = Wednesday. Map Filter Field to "Day". Attendees browse the full schedule or drill into a specific day. **Task manager** -- Tasks collection with a "Status" field (To Do, In Progress, Done). Three tabs, each with a matching Filter Value. Line 1 = task name, Line 2 = due date, Line 3 = assignee. Tap action links to the task detail screen. **Property listings** -- Listings collection with a "Type" field (For Sale, For Rent, Sold). Tabs filter by type. Show avatar image for property photo, Line 1 for address, Line 2 for price, Line 3 for bedrooms. **Team directory** -- Users collection with a "Department" field. Tab per department. Show avatar image for profile photo, Line 1 for name, Line 2 for role, Line 3 for email. Tap action opens the team member's profile. **Order history** -- Orders collection with an "Order Status" field. Tabs for Pending, Shipped, Delivered. Line 1 = order number, Line 2 = date placed, Line 3 = total amount. Customers see their orders organized by status at a glance. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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://help.adalo.com/component-basics/marketplace-components/tabbed-list.md?ask= ``` 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.