USER INTERFACE

Accordion

Show and hide sections of content. Everything below is live.
THEME
DENSITY
01

Playground

Change the settings — compare your accordion with the default
COMPARE
1 difference
DEFAULT
YOURS
Settings
MODE
default: Single
STYLE
default: Default
ICON
default: Chevron · Right
SIZE
default: M
DIFF FROM DEFAULT
− variant="default"+ variant="separated"
02

Variants

Five styles, same content
Defaultone box · dividers
Borderedsquare-ish · strong rules
Separatedone card per item
Flushno box · lines only
Filledopen item inverts
03

Rich content

What fits in a header and a panel
Rich headers & bodiesicon · sub · badge · action · rows · chips
Nestedan accordion inside a panel
04

In Avava

Four places we actually use it
Client FAQsearch filters and highlights
⌕6 questions
Project settingssummary in the header
List filtersselected count in the header
2 filters · 3 invoices
Brief stepsdone ✓ · next opens
05

States

Closed, open, hover, focus, disabled, loading, error
Closedaria-expanded=false
Openaria-expanded=true
Hoverw05 background
Disabledopacity .45 · not-allowed
Loadingskeleton in panel
Errorcoral + Retry
06

Keyboard & a11y

Works without a mouse
↓Next header↑Previous headerHomeFirst headerEndLast headerEnterOpen / closeSpaceOpen / close
Click a header in the playground, then use the keys. Header: button[aria-expanded][aria-controls] · Panel: [id][inert while closed]
DO✓Use for 3–8 related sections✓Write headers that say what’s inside✓Keep the first item open when it matters most✓Show a summary in the header when closed
DON’T✕Hide required form fields inside✕Nest more than one level✕Use for content people compare side by side✕Auto-close what the user just opened (in multiple mode)
OR USE…→Tabs — switching between equal views→Collapse — a single show/hide→Steps — a guided sequence