role disclosure
Accordion draft v0.1.0
A stack of sections whose content shows and hides under a header people activate.
An accordion stacks sections of content, each behind a header: activating the header shows the section, activating it again hides it. It saves vertical space when people need only one or two sections at a time (settings groups, frequently asked questions, order details). Several sections may be open at once; the component never closes one when another opens. One section alone is the same thing with a single item.
Decisions
From decisions in packages/components/specs/components/accordion.spec.json, newest first. Every active decision is implemented by the spec, the tokens, the web implementation and the guidelines.
Behaviour
-
Each section is a native disclosure (details and summary on the web); any number of sections may be open at once, and the component never closes one when another opens. The accordion ships no script.
The native disclosure gives the toggle, the keyboard, the hidden content and the expanded state for free; closing other sections needs script.
native-details· 2026-10-03 · v0.1.0HTML: the details element (a disclosure widget; the open attribute)APG: Accordion pattern
Accessibility
-
The section title is plain text in the trigger, not a heading, because the trigger is exposed as a button whose children are presentational; the accordion sits under a heading of the page.
title-not-a-heading· 2026-10-03 · v0.1.0WAI-ARIA 1.2: button role (children presentational)WAI-ARIA 1.2: presentational children
Color
-
Triggers are transparent at rest, take the subtle neutral fill on hover and its hover step on press (the Button's ghost tints); items are separated by a hairline in the on-level border color; the title is primary text, the content secondary text.
trigger-tints· 2026-10-03 · v0.1.0accordion.trigger.background.*accordion.item.border-coloraccordion.title.coloraccordion.panel.color
Size
-
Two sizes: small (40 px triggers, 14 px title and content, 20 px chevron) and medium (48 px, 16 px, 24 px, the default); triggers have 8 px of padding and 4 px corners, panels 12 px of block padding.
sizes· 2026-10-03 · v0.1.0accordion.trigger.min-height.*accordion.title.typography.*accordion.panel.typography.*accordion.indicator.size.*accordion.trigger.padding-inlineaccordion.trigger.padding-blockaccordion.panel.padding-block