Accordion

Vertically stacked collapsible sections for organizing content into expandable/collapsible panels.

When to use

• FAQ sections with question/answer pairs.
• Settings panels with grouped options that don't all need to be visible.
• Long forms broken into logical sections.

When NOT to use

• For switching between mutually exclusive content views — use Tabs.
• For a single collapsible section — use a Disclosure or a details/summary element.
• For navigation — use a sidebar or nav component.

Import

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from '@mihcm/ui/Accordion';

Basic usage

<Accordion type="single">
  <AccordionItem value="item-1">
    <AccordionTrigger>Section one</AccordionTrigger>
    <AccordionContent>Content for section one.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Section two</AccordionTrigger>
    <AccordionContent>Content for section two.</AccordionContent>
  </AccordionItem>
</Accordion>

Single vs Multiple

• type="single" (default) — only one section open at a time. Opening another closes the current one.
• type="multiple" — any number of sections can be open simultaneously.

Default open

Pass defaultValue to pre-open one or more items:

<Accordion type="single" defaultValue="item-2">…</Accordion>
<Accordion type="multiple" defaultValue={['a', 'b']}>…</Accordion>

Composition

• AccordionTrigger renders a <button> — pass any inline content (text, badges, icons).
• AccordionContent supports any children. For forms, keep each section focused on one concern.
• duration="fast" | "normal" | "slow" controls the content height transition. The defaults are intentionally smooth: 300 ms, 500 ms, and 700 ms with a soft easing curve. Motion is disabled automatically for reduced-motion users.
• Closed content remains mounted with aria-hidden and inert, so exit animation can complete without exposing collapsed controls to keyboard users.
• Nest accordions sparingly. Two levels maximum — deeper nesting signals the content needs a different structure.

Related

• Tabs — mutually exclusive panel switching with a horizontal tab bar.
• Collapsible — single expandable section without group semantics.