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-lib/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>

<script type="module">
  import "@kernelui-lib/elements";
</script>

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

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

What is Kernel?

A component library built on real HTML elements.

Is it accessible?

Yes, by default, since the browser does most of the work.

Unstyled

Same component — Kernel look stripped. See Platforms.

type

first item title

first item open by default

Usage

<Accordion>
  <AccordionItem title="What is Kernel?" defaultOpen>
    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>

<kernel-accordion>
  <kernel-accordion-item title="What is Kernel?" default-open>
    A component library built on real HTML elements.
  </kernel-accordion-item>
  <kernel-accordion-item title="Is it accessible?">
    Yes, by default, since the browser does most of the work.
  </kernel-accordion-item>
</kernel-accordion>

Props

Props for Accordion.
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.