Accordion

The Accordion component displays collapsible sections of content. It supports two modes: single (only one item open) or multiple (multiple items open simultaneously). Users can expand and collapse sections with keyboard navigation and mouse interaction.

Usage

import { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent } from '@loke/ui/accordion';

export default function Example() {
  return (
    <Accordion type="single" defaultValue="item-1">
      <AccordionItem value="item-1">
        <AccordionHeader>
          <AccordionTrigger>Section 1</AccordionTrigger>
        </AccordionHeader>
        <AccordionContent>
          Content for section 1 goes here.
        </AccordionContent>
      </AccordionItem>

      <AccordionItem value="item-2">
        <AccordionHeader>
          <AccordionTrigger>Section 2</AccordionTrigger>
        </AccordionHeader>
        <AccordionContent>
          Content for section 2 goes here.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Sub-components

• AccordionItem — Wraps a single collapsible section with header and content
• AccordionHeader — Container for the visible header (typically contains the trigger)
• AccordionTrigger — Interactive element that toggles the expanded state
• AccordionContent — Expandable/collapsible content region

Props

Examples

Single collapsible (FAQ style)

Multiple items open simultaneously

Accessibility

• Keyboard navigation: Use ArrowDown, ArrowUp, Home, and End to navigate between triggers.
• Each trigger has role="button" and aria-expanded to indicate state.
• Content region has role="region" and is associated with the trigger via aria-labelledby.
• Disabled items are not focusable and do not respond to interactions.

Best practices

• Use single mode when only one section should be reviewed at a time (e.g., FAQ, wizard steps).
• Use multiple mode when users need to compare information across sections (e.g., settings, comparison tables).
• Keep trigger labels concise and descriptive.
• Provide clear visual feedback (icon rotation, background color change) to indicate expanded state via CSS.