Updated
Accordion
Accordion hides an answer or a detail under a one-line title until someone taps the row, so a long screen stays short.
Updated
Preview
A row that opens in place, for FAQ lists and grouped settings: closed it shows the title, open it adds the description underneath. Live specimens, open one.
Every row is one component with one hidden text node: the description sits under the title in every variant and switches off while the row is closed. A closed row hugs to 56, 16 of padding, 24 of title and 16 of padding, at a pinned width of 340.
Accordion ships 6 variants, State by Icon. Source: the Accordion set of the Appetite UI Figma file, read on October 2, 2026.
Which states does Accordion have?
Three states on one shape: Default is bg/white-0 with a 1 border/soft-100 edge and a shadow, and Pressed drops both and fills bg/weak-50. Active keeps that fill and opens the description.
State Default
State Pressed
State Active
All three states share one radius, 24, so the row keeps its shape as it opens. Only the fill, the edge and the shadow change.
Default is the only state with the inside edge and the xs shadow, a 2 blur one down at 4 percent and a 4 blur four down at 1. Pressed and Active are flat.
The chevron is swapped, not turned: chevron-down while closed, chevron-up when open.
With the file's description text, Active is 102 tall, with the icon and without it. The description wraps to two lines in the 236 column and in the 272 column, so a longer text makes the row taller and leaves the padding alone.
The prototype presses Default into Pressed, then moves Pressed and Active to the next state on click. It runs 200 ms on ease out, motion/duration/base in the Motion collection.
How do I add a leading icon?
Set Icon to True; it is off by default. A 24 box holding a 20 vector at stroke 2 then leads the row, and the text column narrows by 36, the icon plus the 12 gap.
Icon True, text column 236
Icon False, text column 272
The chevron stays at the right end of the row when the icon is off.
The chevron is the one part that changes color with State: fg/soft-500 while closed, fg/sub-700 the moment you touch the row or open it. The leading icon holds fg/sub-700 throughout.
Both sit in a 24 box, but the leading glyph draws at 20 and the chevron at 12 by 6.
Properties
Two variant axes, two text properties and an instance swap.
| Property | Type | Default |
|---|---|---|
State | Variant: Default, Pressed, Active | Default |
Icon | Variant: True, False | False |
Title | Text | Title of accordion |
Description | Text, visible in Active only | Body content that appears when the row expands. |
Icon Swap | Instance swap | circle-question-mark |
Title and Description are both text properties, so a real FAQ row is two overrides. Description is bound to the node that is hidden while the row is closed, so you can fill it on a collapsed instance and see nothing until State goes to Active.
The title is Regular 16/24 and the description Regular 14/20, so size and color are all that separate them. The matrix is complete: three states across both Icon values.
Tokens
Every value the component reads, resolved through its aliases to the primitive underneath.
| Token | Light | Dark | Applied to |
|---|---|---|---|
bg/white-0 | #FFFFFF | #0E0E0F | Default fill |
border/soft-100 | #E9E9EA | #2F2F31 | The 1px inside edge, Default only |
bg/weak-50 | #F4F5F5 | #242427 | Pressed and Active fill |
text/strong-950 | #0E0E0F | #FFFFFF | Title |
text/sub-700 | #48484A | #C7C7CC | Description |
fg/sub-700 | #48484A | #C7C7CC | Leading icon, and the chevron in Pressed and Active |
fg/soft-500 | #8E8E93 | #AEAEB2 | Chevron in Default |
Radius is 24, dimensions/radius/2xl, in all three states. The shadow on Default is the effect style dropShadow/xs, and every color is a semantic token.
How does Accordion differ on iOS and Material 3?
Neither platform has an accordion set in the file. iOS builds it with DisclosureGroup and Android with an expandable list item, and Appetite UI draws one row for both.
| Appetite UI | iOS counterpart | Material 3 counterpart | What differs |
|---|---|---|---|
| Accordion | None in the file. In code, SwiftUI DisclosureGroup. The nearest drawn row is iOS / List with a Chevron trailing slot. | None in the file. In code, an expandable list item. | Appetite UI draws a 340 wide card row, 56 tall closed, with its own radius 24 and shadow. A native list row is 44 tall on iOS and 56 on Android, from platform/list-row/min-height. |
The row is 56 tall, above the minimum touch target of 44 pt on iOS and 48 dp on Android in platform/min-touch-target. In code, build it on the native disclosure so VoiceOver and TalkBack announce the expanded state.
When should I use an Accordion?
Use a stack of rows when each title has a detail worth hiding, as in FAQ lists and grouped settings.
Do
Stack them. One row alone reads as a button that did nothing, and the list says there is more behind each title.
Don't
Do not nest one inside another. A reader two levels deep has lost track of what closing does.
Keep the title to one line. At 236, the column you get once the leading icon is on, a wrapping title pushes the closed height past 56 and breaks the rhythm of the stack.