Accordion

tile/accordion

Organizes content into vertically stacked, expandable sections. Each section has a header and nested content.

Properties

This component has no configurable properties. Provide content through child components.

Usage

Use an accordion to organize content into vertically stacked, expandable sections to reduce visual clutter on dense screens. An accordion has no attributes of its own. To provide content in an accordion, use tile/accordionitem child components.

1{
2    "definition": "tile/accordion",
3    "children": [
4        {
5            "definition": "tile/accordionitem",
6            "attributes": { "title": "What is your refund policy?" },
7            "children": [
8                {
9                    "definition": "tile/text",
10                    "attributes": {
11                        "text": "We offer a 30-day money-back guarantee on all purchases."
12                    }
13                }
14            ]
15        },
16        {
17            "definition": "tile/accordionitem",
18            "attributes": { "title": "How long does shipping take?" },
19            "children": [
20                {
21                    "definition": "tile/text",
22                    "attributes": {
23                        "text": "Standard shipping typically takes 5-7 business days."
24                    }
25                }
26            ]
27        }
28    ]
29}

To draw attention to the first section, open it by default with isExpanded and add an iconName for a visual cue in the header.

1{
2    "definition": "tile/accordion",
3    "children": [
4        {
5            "definition": "tile/accordionitem",
6            "attributes": { "title": "Getting Started", "isExpanded": true, "iconName": "star" },
7            "children": [
8                {
9                    "definition": "tile/text",
10                    "attributes": { "text": "Follow the steps below to get started." }
11                }
12            ]
13        },
14        {
15            "definition": "tile/accordionitem",
16            "attributes": { "title": "Advanced Topics", "iconName": "settings" },
17            "children": [
18                {
19                    "definition": "tile/text",
20                    "attributes": { "text": "Explore more complex features and customizations." }
21                }
22            ]
23        }
24    ]
25}

For richer sections, wrap multiple pieces in a tile/column to stack them, and mix in tile/badge or tile/button.

1{
2    "definition": "tile/accordionitem",
3    "attributes": { "title": "Product Features", "iconName": "heart" },
4    "children": [
5        {
6            "definition": "tile/column",
7            "attributes": { "gap": "sm" },
8            "children": [
9                {
10                    "definition": "tile/text",
11                    "attributes": { "text": "High-quality materials" }
12                },
13                {
14                    "definition": "tile/badge",
15                    "attributes": { "label": "New", "variant": "info" }
16                }
17            ]
18        }
19    ]
20}

Design Guidelines

Consider these guidelines when working with accordions.

Keep section titles concise and descriptive so users can scan headers to find what they need.
To surface the most important section immediately, set isExpanded on one item rather than leaving every section collapsed.
Sections expand and collapse independently, so more than one can be open at once. Use per-item isExpanded to seed which sections start open.
When content should always be visible or is short enough not to warrant collapsing, use a tile/column instead of hiding it behind an accordion.

Limitations

Note any limitations that apply to this component.

Slackbot

No known limitations for tile/accordion in Slackbot.

ChatGPT

No known limitations for tile/accordion in ChatGPT.

Agentforce

No known limitations for tile/accordion in Agentforce.