Sections that expand one truth at a time.
| Prop / event | Type | Notes |
|---|---|---|
| variant | joined · separate | Connected rows, or discrete cards |
| allowMultiple | boolean | Keep several sections open at once |
| defaultOpen | number | Index open on first render |
| Item.title | ReactNode | The always-visible header |
| Enter / Space | — | Toggle the focused section |
An Accordion hides secondary detail until asked for. For peer views use Tabs; for a step-by-step flow use a Stepper.
Use it for secondary detail — FAQs, settings groups, fine print.
Don't hide primary content behind a click. Keep essentials visible.
Keep one section open at a time so focus stays on one truth.
Don't wrap a single section in an accordion. Just show it.
Frequently-asked questions, one answer at a time.
Grouped settings as separate, collapsible cards.
Progressive disclosure in a checkout or form.
| Token | Value | Role |
|---|---|---|
| --acc-head-pad | 15px 16px | Header padding |
| --acc-card | #0E0F12 | Section surface |
| --acc-divider | #1A1A1A | Hairline in joined mode |
| --acc-hover | #131418 | Header hover fill |
| --acc-chevron | 90° · .22s | Open rotation |
| --acc-ease | grid-rows .25s | Body expand transition |
<div class="o-acc o-acc--joined">
<div class="o-acc__item is-open">
<button class="o-acc__head" aria-expanded="true">
<span class="o-acc__num">01</span> What is an optimistic update?
<svg class="o-acc__chevron">…</svg>
</button>
<div class="o-acc__body"><div><div class="o-acc__inner">…</div></div></div>
</div>
</div>