FAQ Component

The FAQ component displays a collapsible list of questions and answers bound directly to your Adalo database. Each row shows a title and reveals its subtitle when tapped -- perfect for help centers, support pages, and onboarding flows. URLs in answers are detected automatically and become tappable links.

Getting Started

Add the FAQ component to any screen and connect it to a collection using the What items should be displayed? field. Then open the Row Data section to map your collection's fields to Title and Subtitle. The component will display all records as expandable rows with your chosen icons and styling.

Settings

What items should be displayed?

The collection that powers the FAQ list. Connect this to any Adalo database collection.

Start Expanded?

When turned on, all rows start open so users can see all answers without tapping. When turned off (default), all rows start collapsed. This is a global setting -- all rows share the same default state.

Row Data

Title

The question or heading shown at the top of each row (always visible). Bind this to a text field in your collection, such as a "Question" or "Name" property.

Subtitle

The answer or body text shown when a row is expanded. Bind this to a longer text field in your collection such as "Answer" or "Body". Any URLs in this text are automatically detected and rendered as tappable links.

Title Font

Controls the font size, weight, and color of the title text on each row.

• Font Size -- Size in pixels. Use the slider to adjust between 10--32px (default: 16).

• Font Weight -- Choose Light, Regular, Medium, Semi Bold, or Bold (default: Semi Bold).

• Color -- The text color for the title. Defaults to your app's text theme color.

Subtitle Font

Controls the font size, weight, and color of the subtitle text shown when a row is expanded.

• Font Size -- Size in pixels, 10--28px (default: 14).

• Font Weight -- Light through Bold (default: Regular).

• Color -- Defaults to your app's text theme color.

Card Appearance

• Background Color -- The fill color of each card. Defaults to your app's background theme color.

• Border Color -- The color of the card border. Defaults to your app's divider color.

• Border Thickness -- How thick the border is, 0--8px (default: 1). Set to 0 to remove the border entirely.

• Open Icon -- The icon shown on a collapsed row, indicating it can be opened. Defaults to keyboard-arrow-right.

• Close Icon -- The icon shown on an expanded row, indicating it can be closed. Defaults to keyboard-arrow-down.

• Icon Color -- The color of the open/close icon. Defaults to your app's text color.

• Icon Size -- Size of the open/close icon, 12--40px (default: 22).

• Link Color -- The color used for auto-detected URLs in subtitle text. Defaults to your app's primary color.

• Corner Radius -- The border radius of each card, 0--32px (default: 8).

• Row Spacing -- The gap between each card, 0--32px (default: 8).

Tips & Best Practices

• Bind Title to a short text field -- question titles work best under 80 characters. Long titles will wrap and push the icon down.

• URLs in subtitles are auto-detected -- if your answer includes a link like https://help.adalo.com, it will automatically become a tappable hyperlink in the app. No extra setup needed.

• Use Row Spacing: 0 and no border radius for a flat, divider-style FAQ that looks like a native settings screen.

• Set a high Corner Radius (16--24) and soft background color for a card-based FAQ with a modern feel.

• The Open Icon and Close Icon are independent -- you can use a + for Open and × for Close, or use directional arrows like keyboard-arrow-right / keyboard-arrow-down.

• Start Expanded works well for short FAQ lists (3--5 rows). For longer lists, keep it off so users aren't overwhelmed.

• In the builder, the subtitle is always shown so you can preview your styling. In the live app, rows start collapsed (or expanded if Start Expanded is on).

Example Use Cases

Help center in a SaaS app -- Connect to a "Help Articles" collection with "Question" and "Answer" fields. Set a white card background, 1px border, and keyboard-arrow-right / keyboard-arrow-down icons for a clean, professional look.

Onboarding FAQ screen -- Use Start Expanded: On with 3--4 key questions visible. Add a soft colored background and bold title font to match your brand.

App settings or permissions explainer -- Bind to a "Settings Info" collection that explains each permission or setting. Set Row Spacing to 0 and Border Radius to 0 for a native list feel.

Product or course curriculum -- List module names as titles and summaries as subtitles. Use add and remove icons for a clear open/close affordance.

Support ticket FAQ -- Combine with a search filter in your Adalo app to let users filter FAQ items by keyword before tapping to read answers.