# 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.
---
# 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://help.adalo.com/component-basics/marketplace-components/faq-component.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.