Accordion
An accordion is a list of rows that each expand to show more content and collapse to hide it. iOS calls the pattern a disclosure group, and Material 3 has no accordion component.
Why it matters
An accordion hides details until they are relevant, which keeps a long screen short. Apple puts the most likely controls at the top so they are always visible and hides advanced ones.
It costs a tap per answer, so it suits a FAQ better than steps people must all read.
Accordion on iOS and Android
Also called Disclosure group, Expandable list, Collapsible section. The same idea in each system, with the values Appetite UI gives it.
| Value | iOS | Android | Appetite UI |
|---|---|---|---|
| Name | Disclosure group | No component: expandable list item in code | Accordion |
| Closed row in the file | List row, 44 minimum | List row, 56 minimum | See below |
In Appetite UI
Accordion is a 340 wide card row, 56 tall when closed, with its own radius 24 and shadow. A native list row is 44 tall on iOS and 56 on Android, read from platform/list-row/min-height.
Example
A help screen lists questions as rows. Tapping Refunds opens the answer below it and turns the chevron; the other rows stay shut.
Common mistakes
- Hiding content people need on first view.
- A label that does not say what opens. Name it, such as Advanced options.
- Opening one row and closing another without a reason.
- Hiding the only route to a main action.
Questions
Does iOS have an accordion?
The pattern is a disclosure group in SwiftUI, with a disclosure triangle or button that points inward when the content is hidden and down when it is shown.
Does Material 3 have an accordion?
No component. Material builds the pattern from expandable list items in code.
Sources
The pages the facts above rest on, each read October 30, 2026.