Accordion

molecules

Vertical stack of expandable sections. Single or multi-expand modes. Each header is a button with aria-expanded.

Demo

What payment methods are accepted?
We accept all major credit cards (Visa, Mastercard, Amex), Apple Pay, Google Pay, and bank transfers via Nuvei.
How are refunds processed?
Refunds are issued to the original payment method within 5-10 business days.
Can I edit tickets after purchase?
Yes, ticket holders can be changed up to 24 hours before the event starts.

Props

PropTypeRequiredDefaultDescription
itemsAccordionItem[]Yes—2-10 items

TypeScript Interface

interface AccordionProps {
  items: { id: string; title: string; content: React.ReactNode; defaultOpen?: boolean; disabled?: boolean }[];
  multiple?: boolean;
  ariaLabel: string;
}

Assertions (NASA Rule 5)

  • [type]items bounded 2-10 (NASA Rule 2)(NASA Rule 2)
  • [aria]Each header is <button aria-expanded aria-controls=panelId>; panel has role='region'(WAI-ARIA Accordion Pattern)

Usage

Import

import { Accordion } from '@epasslive/design-system'

Basic

<Accordion />

With Variants

<Accordion variant="primary" size="md" />