Skip to content
Try free

Accordion

Stacked sections that open and close; headers are buttons inside headings at the level you choose.

  • Free core, MIT
  • Version 2.0.0-rc.1
  • APG pattern: Accordion

Examples

These are the real React components. Use them with a mouse, touch or keyboard, and switch the theme and density for every example at once.

Default

Each seat is one person who can sign in. Team plans start at two seats.

Show the code

Default, code

const Faq = (props: { multiple?: boolean }) => (
  <Accordion headingLevel={3} allowsMultipleExpanded={props.multiple} defaultExpandedKeys={['seats']} className="max-w-xl">
    <AccordionItem id="seats" title="What is a seat?">Each seat is one person who can sign in. Team plans start at two seats.</AccordionItem>
    <AccordionItem id="billing" title="When am I billed?">Once a year, on the day you subscribed. We email a receipt each time.</AccordionItem>
    <AccordionItem id="cancel" title="Can I cancel?">Yes. You keep access until the end of the year you paid for.</AccordionItem>
  </Accordion>
);

<Faq />

Several open

Each seat is one person who can sign in. Team plans start at two seats.

Show the code

Several open, code

const Faq = (props: { multiple?: boolean }) => (
  <Accordion headingLevel={3} allowsMultipleExpanded={props.multiple} defaultExpandedKeys={['seats']} className="max-w-xl">
    <AccordionItem id="seats" title="What is a seat?">Each seat is one person who can sign in. Team plans start at two seats.</AccordionItem>
    <AccordionItem id="billing" title="When am I billed?">Once a year, on the day you subscribed. We email a receipt each time.</AccordionItem>
    <AccordionItem id="cancel" title="Can I cancel?">Yes. You keep access until the end of the year you paid for.</AccordionItem>
  </Accordion>
);

<Faq multiple />

Tokens

The 10 design tokens Accordion reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.

Show all 10 tokens
Tokens Accordion reads
TokenValue nowCSS variable
color.border.default…--sd-color-border-default
color.icon.default…--sd-color-icon-default
color.text.default…--sd-color-text-default
motion.duration.fast…--sd-motion-duration-fast
motion.easing.standard…--sd-motion-easing-standard
radius.xs…--sd-radius-xs
spacing.gap.md…--sd-spacing-gap-md
spacing.inset.md…--sd-spacing-inset-md
spacing.inset.sm…--sd-spacing-inset-sm
target.min…--sd-target-min

Install

The npm package isn’t published yet. When it is, this is the install line; until then, this page runs the same build of the package (from commit fa3abf8).

Install

npm i @superduperui/react @superduperui/tokens

Import

import { Accordion, AccordionItem } from "@superduperui/react"

Props

Accordion also takes the props of the React Aria component it’s built on.

Accordion props
PropTypeWhat it does
childrenrequiredReactNodeAccordionItem elements.
headingLevel2 | 3 | 4 | 5 | 6Default 3Heading level of every item's header, so it fits the page outline (2.4.10). Default 3.

When to use it

Use it for

  • FAQs
  • Long settings pages people scan

Use something else for

  • Content everyone needs: show it
  • Switching views: use Tabs

Accessibility

Screen readers announce "What is a seat?, button, expanded, heading level 3".

WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6, 2.3.3.

Compact density meets AA (2.5.8, 24px targets), not AAA.

What your product still has to do

  • Pick the heading level that fits your page outline

Shared patterns it ships with: 2.4.10 (headingLevel keeps the outline).

This release’s test results

Test results for Accordion in this release
axe-core (WCAG A, AA, AAA and best practice)60 runs across every story, theme, density and width: 0 violations
Rendered text contrast235 text runs: 0 below 7:1, lowest 16.71:1
Target size42 targets: 0 under 44px in Comfortable
Focus appearance (2.4.13)54 focus stops in 3 browser engines: all pass
Keyboard scriptChromium 4 of 4, Firefox 4 of 4, WebKit 4 of 4

Manual passes with VoiceOver and NVDA haven’t been done yet.

Keyboard

Each step is scripted and run in Chromium, Firefox and WebKit.

Accordion keyboard steps
KeyWhat happens
TabTab reaches the first header, open
TabTab moves to the next header (closed panels hold no stops)
EnterEnter opens it and closes the other
SpaceSpace closes it again

In Figma

The Figma component is Accordion. The Figma library isn’t published yet.

Figma to code: Multiple → allowsMultipleExpanded; Items → children.