Skip to content

Accordion

A stack of headings that each show or hide a section of content.

alphaReact AriaSource

An itemised invoice, the prescription or referral, and a discharge summary for hospital stays.

Installation

pnpm add @syntara/react @syntara/tokens
import { Accordion, AccordionItem } from '@syntara/react';

Usage

import { Accordion, AccordionItem } from '@syntara/react';

export function ClaimFaq() {
  return (
    <Accordion defaultExpandedKeys={['documents']}>
      <AccordionItem id="documents" title="Which documents do I need?">
        An itemised invoice and the prescription.
      </AccordionItem>
      <AccordionItem id="timeline" title="How long does a review take?">
        Most claims are reviewed within 3 working days.
      </AccordionItem>
    </Accordion>
  );
}

Examples

FAQ, several open

allowsMultipleExpanded, a custom heading level and a disabled item.

Yes. The new plan starts on the first day of next month and we adjust the premium from then.

Emergency treatment is covered for trips up to 30 days. Planned treatment abroad needs pre-approval.

Accessibility

KeysAction
TaborShiftTabMoves between triggers and into open content.
EnterorSpaceOpens or closes the focused item.
  • Each trigger is a button with aria-expanded and aria-controls inside a heading (level 3 by default).
  • Panels are role="group" labelled by their trigger. Closed panels use hidden="until-found", so find-in-page can open them.
  • The chevron rotates as a secondary cue; aria-expanded carries the state.
  • Height animates only with prefers-reduced-motion: no-preference.

Guidelines

Do

  • Use for optional detail people scan by heading, like FAQs or settings groups.
  • Write titles as the question or topic people look for.
  • Open the most useful item by default when there is one.

Don’t

  • Don't hide content everyone needs — show it.
  • Don't put a whole page's main flow inside an accordion.
  • Don't nest accordions.

API reference

Accordion

allowsMultipleExpanded
boolean

Lets more than one item be open at once.

Default false

expandedKeys
Iterable<Key>

Ids of open items (controlled).

defaultExpandedKeys
Iterable<Key>

Ids of items open at first (uncontrolled).

onExpandedChange
(keys: Set<Key>) => void

Called with the ids of open items when they change.

isDisabled
boolean

Disables every item.

Default false

AccordionItem

idRequired
Key

Used by expandedKeys and onExpandedChange.

titleRequired
ReactNode

Text of the trigger button.

children
ReactNode

The content shown when open.

headingLevel
2 | 3 | 4 | 5 | 6

Heading level wrapping the trigger; match the page outline.

Default 3

isDisabled
boolean

Prevents opening or closing this item.

Default false

Tokens

The semantic tokens this component reads, grouped by what they control. Swatches show this site’s theme; change a tenant’s brand and the component follows with no code change.

Colour5
border.subtletext.defaultfocus.ringtext.disabledtext.subtle
Type4
font.size.mdfont.weight.mediumline-height.snugline-height.normal
Space and size5
space.4control-heightspace.1space.6space.3
Shape2
radius.badgeradius.pill
Motion7
motion.duration.fastmotion.easingmotion.duration.slowmotion.easing-outmotion.duration.normalmotion.duration.springmotion.spring