Skip to content
Holm Digital logotyp

Accordion

A vertically stacked set of interactive headings that each reveal a section of content. Built-in ARIA and keyboard support.

The Accordion component provides a way to toggle the visibility of content sections. It automatically manages all necessary ARIA attributes for screen reader support.

Accessibility Features

  • Automatic ARIA: Manages aria-expanded and aria-controls correlations.
  • Keyboard Support: Support for Enter and Space to toggle panels.

Props Reference

interface AccordionProps { type?: 'single' | 'multiple'; // default: 'single' defaultValue?: string | string[]; children: ReactNode; }

Usage Example

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@holmdigital/components'; <Accordion type="single" defaultValue="item-1"> <AccordionItem value="item-1"> <AccordionTrigger>Is this accessible?</AccordionTrigger> <AccordionContent> Yes, it handles aria-expanded and keyboard navigation automatically. </AccordionContent> </AccordionItem> </Accordion>
Next →Introduction