Accordion

Collapsible content sections

NavigationStable

Preview

Interactive preview of the Accordion component with different variants.

Installation

Install the package via npm:

bash
npm install apex-design-system

Import

tsx
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from 'apex-design-system';

Basic Usage

tsx
<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Question 1</AccordionTrigger>
    <AccordionContent>Answer 1</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Question 2</AccordionTrigger>
    <AccordionContent>Answer 2</AccordionContent>
  </AccordionItem>
</Accordion>

Accessibility

This component follows WAI-ARIA best practices and is WCAG 2.1 AA compliant. It includes proper keyboard navigation, focus management, and screen reader support.

View in StorybookView source