Accordion Item

tile/accordionItem

Creates an expandable section within an accordion. Each section has a clickable header with a title and optional icon.

Properties

Name	Required	Lightning Type	Default	Description
iconAlt	No	`lightning__textType`		Alternative text describing what the header icon conveys. When omitted or empty, the icon is treated as decorative and hidden from assistive technologies.
iconName	No	`lightning__iconName`		An icon identifier shown in the section header next to the title.
isExpanded	No	`lightning__booleanType`	false	Specifies whether this section is currently expanded to show its content.
subtitle	No	`lightning__textType`		Secondary text shown beneath the title in the accordion section header.
title	Yes	`lightning__textType`		The header text for the clickable trigger on the accordion section.

Usage

Use an accordion item to define a section within a tile/accordion. Each item renders a clickable header with its title, optional subtitle, and optional iconName, and reveals its child content when expanded. Accordion items are only valid as direct children of a tile/accordion.

1{
2    "definition": "tile/accordion",
3    "children": [
4        {
5            "definition": "tile/accordionItem",
6            "attributes": { "title": "Shipping Details", "iconName": "settings" },
7            "children": [
8                {
9                    "definition": "tile/text",
10                    "attributes": { "text": "Standard shipping takes 5-7 business days." }
11                }
12            ]
13        }
14    ]
15}

Add a subtitle to show secondary text under the title, useful for a short preview of the section’s content.

1{
2    "definition": "tile/accordionItem",
3    "attributes": { "title": "Shipping Details", "subtitle": "Rates, timelines, and tracking" },
4    "children": [
5        {
6            "definition": "tile/text",
7            "attributes": { "text": "Standard shipping takes 5-7 business days." }
8        }
9    ]
10}

To draw a section open on first render, set isExpanded to true.

1{
2    "definition": "tile/accordionItem",
3    "attributes": { "title": "Getting Started", "isExpanded": true },
4    "children": [
5        {
6            "definition": "tile/text",
7            "attributes": { "text": "Follow the steps below to get started." }
8        }
9    ]
10}

To stack multiple pieces of content in one section, wrap them in a tile/column, and mix in components like tile/badge or tile/button for richer sections.

1{
2    "definition": "tile/accordionItem",
3    "attributes": { "title": "Beginner Level", "iconName": "star" },
4    "children": [
5        {
6            "definition": "tile/column",
7            "attributes": { "gap": "sm" },
8            "children": [
9                {
10                    "definition": "tile/text",
11                    "attributes": { "text": "Introduction to basic concepts." }
12                },
13                {
14                    "definition": "tile/badge",
15                    "attributes": { "label": "5 lessons", "variant": "info" }
16                }
17            ]
18        }
19    ]
20}

Design Guidelines

Consider these guidelines when working with accordion items.

Keep each title concise and descriptive so users can scan headers and find the right section quickly.
Use subtitle for a short, scannable preview of a section’s content so users can decide whether to expand it without guessing from the title alone.
To highlight the most important section, set isExpanded on it rather than leaving every section collapsed.
Do not depend on whether opening one section collapses the others — each surface decides that expansion behavior, so use isExpanded only to seed the initial state.
Add an iconName when a visual cue helps users recognize the section immediately, but omit it when titles are already clear.

Limitations

Note any limitations that apply to this component.

Slackbot

No known limitations for tile/accordionItem in Slackbot.

ChatGPT

No known limitations for tile/accordionItem in ChatGPT.

Agentforce

No known limitations for tile/accordionItem in Agentforce.