Accordion
Last Updated: September 2026Accordions store collections of supplemental information stored in one compact location. Various toggling behaviors are supported to handle different viewing options.
Source CodeAnatomy
link- 1Heading
- 2Subheading
- 3Chevron Icon
- 4Content Slot
Variants
linkSingle-expand
Default. Opening one item closes the others.
Multiple
multiple allows several panels open at once.
With subheading
subHeading adds secondary context under the title.
Disabled item
disabled on an item prevents open/close for that section.
Usage Guidelines
linkWhen to use
- •To organize related sections on a long page without showing everything at once.
- •When users need to scan headings and open only what they need.
- •For settings, FAQs, and detail groups that share one list pattern.
When not to use
- •For a single show/hide block — use Disclosure.
- •When all content must be visible for comparison — use static sections.
- •For primary navigation — use Navigation patterns instead.
Use short, scannable headings that describe the section.
Don't use vague headings like 'Section 1' or 'More'.
Group related sections that share the same interaction pattern.
Don't nest unrelated workflows that belong on separate pages.
Behaviors
linkOpen state
- •Single-expand is the default (multiple={false}).
- •Control open items with value / defaultValue on the root and matching value on items.
Disabled
- •disabled on the root disables every item.
- •disabled on an item disables only that section.
Content Guidelines
linkHeadings
- •Use noun phrases that name the section ('Billing', 'Security').
- •Keep headings unique within the accordion.
Panel content
- •Put only the details needed for that section — avoid dumping entire pages.
- •Prefer forms and lists that make sense in a collapsible panel.
Accessibility
linkText & Labels
- •Heading text is the accessible name of the trigger.
- •Subheadings are supplemental — don't rely on them alone for meaning.
ARIA attributes
- •Items expose expand/collapse state to assistive technology.
- •Disabled items are announced as unavailable.
Keyboard Support
- •Tab → move between item triggers.
- •Enter / Space → expand or collapse the focused item.
WCAG Compliance Standards
FAQs
linkAccordion vs Disclosure?
Accordion manages a list of sections (often one open at a time). Disclosure is a single collapsible block.
How do I open an item by default?
Set defaultValue (or value) on Accordion to the item's value, and set the same value on Accordion.Item.
Can multiple panels be open?
Yes — pass multiple on Accordion.