Accordion
A stack of headers that each open to reveal a section of content. It keeps a long page short and lets people read only what they came for.
Preview
Standard orders arrive in four to six working days. Express arrives in two.
When to use
- For FAQs, settings groups and long forms, where most people need one or two sections, not all of them.
- When the headers alone tell people enough to choose which one to open.
- In narrow spaces, such as a sidebar or a phone, where tabs would not fit side by side.
Reach for something else
- For content everyone needs to read: hiding it behind a click only adds a step. Show it on the page.
- For switching between peer views of one thing: that is a Tab Menu Horizontal.
Anatomy
- 1
Container
Bordered, with dividers between items, or flush, with dividers only.
- 2
Header
The full row is the button: a title in sentence case, optionally a leading icon.
- 3
Chevron
Trailing; points down when closed and turns up when open.
- 4
Panel
The content under its header. It opens with a short height animation.
States
Closed
Only the header shows; the chevron points down.
Open
The panel shows and the chevron turns.
Hover
The header row washes a soft grey.
Focus
A visible ring around the header.
Single or multiple
Single closes the open item when another opens; multiple lets any number stay open.
Accessibility
- Each header is a native <button> inside a heading element, so it is reachable by Tab and works with Enter and Space.
- The button carries aria-expanded and aria-controls pointing to its panel.
- The panel is a region labelled by its header (role="region", aria-labelledby), and a closed panel is hidden from assistive tech.
- The chevron is decorative and marked aria-hidden; the expanded state is announced from aria-expanded, not the icon.
Source
The Accordion is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
See it in a block