Accordion

Built on <details>/<summary>. Expand, collapse, keyboard support, find-in-page, and print all come from the browser.

Why real semantic elements?

Because the browser already implements the behaviour, the accessibility, and (often) the keyboard support. There's less to ship, and less to get wrong.

Does this work without JavaScript?

Opening and closing does, it's a native <details> element. The height animation is progressive enhancement on top.

Can I have more than one open at once?

Yes, use type="multiple" on the Accordion.

Usage

import { Accordion, AccordionItem } from "@kernelui/react";

<Accordion type="single">
  <AccordionItem title="What is Kernel?">
    A component library built on real HTML elements.
  </AccordionItem>
  <AccordionItem title="Is it accessible?">
    Yes, by default, since the browser does most of the work.
  </AccordionItem>
</Accordion>

Props

Component	Prop	Type
`Accordion`	`type`	"single" \| "multiple"
`AccordionItem`	`title`	ReactNode
`AccordionItem`	`defaultOpen`	boolean

Accessibility

type="single" gives every item the same name attribute, so the browser enforces "only one open at a time" natively, no JS coordination needed.
The height transition is progressive enhancement (::details-content). Browsers without it still open and close correctly, just without the animation.