Accordion

Interactive

See Accordion in Storybook for every variant, with live controls.

Collapsible sections. Good for step output, logs, and settings that don't all need to be open.

import { Accordion } from "@kairosis/eidos";

<Accordion
  defaultOpen={["build"]}
  items={[
    {
      id: "build",
      title: "Build",
      icon: "hammer",
      meta: "1m 04s",
      content: "Compiled 248 modules.",
    },
    {
      id: "test",
      title: "Test",
      icon: "flask-conical",
      meta: "42s",
      content: "312 passed, 0 failed.",
    },
  ]}
/>;

Props

Prop	Type	Default	Description
`items`	`AccordionItem[]`	—	Required
`multiple`	`boolean`	`false`	Allow several sections open at once
`defaultOpen`	`string[]`	`[]`	Item ids open on first render

AccordionItem is { id, title, content, icon?, meta? }.

Guidelines

Open/closed state is held internally — this is uncontrolled. Seed it with defaultOpen.
With multiple={false} (the default), opening one section closes the other.
Triggers wire up aria-expanded and aria-controls against the panel, so the relationship is announced.
meta is mono, for durations and counts on the trigger row.

Props​

Guidelines​

Props

Guidelines