Accordion

A stack of collapsible sections that reveals supporting information in place, one section at a time.

When to use

• FAQs, settings explanations, and help content where most readers need only one answer.
• Long reference content that would otherwise push the main task below the fold.
• Not for a single expandable summary card: use ExpandableCard. Not for switching between peer views: use Tabs.

Usage

import { Accordion } from "@/components/iris/accordion/accordion";

h(Accordion, {
  items: [
    { title: "Where do my documents live?", content: "In your git repository, as markdown files." },
    { title: "Can I print a document?", content: "Yes. Print preview prints it or saves it as PDF." },
  ],
  defaultOpen: 0,
  size: "md",
});

Props

Prop	Type	Default	Description
items	{ title: string; content: ReactNode }[]	—	Required. One entry per section.
defaultOpen	number	0	Index of the section open on mount. Pass -1 (or any out-of-range index) to start with all closed.
size	"md" | "lg"	"md"	"lg" sets questions at the large text size for page-level FAQs.

Notes

• Single-open and collapsible: opening a section closes the previous one, and the open one can be closed.
• Built on Radix Accordion, so triggers are buttons with aria-expanded, and Up/Down/Home/End move between headers. Closed panels leave the accessibility tree after they collapse.
• Height springs without overshoot and the answer settles in with a slight blur; reduced motion jumps to the end state.
• Reads --ink, --ink-2, --ink-3, --line, --text-sm / --text-base.