Accordion

A bordered surface for collapsible sections.

The surface only — no expand/collapse behavior. Accordion styles the container; the toggling is yours. Pair it with native <details> elements, as below, and you get toggling, keyboard support, and find-in-page for free, with no JavaScript.

Is it accessible?

Yes — details/summary handles the toggle natively.

Usage

accordion-demo.tsx

import { Accordion } from 'trivela-ui';

export function Example() {
  return (
    <Accordion>
      <details>
        <summary className="cursor-pointer font-medium">Is it accessible?</summary>
        <p className="mt-2 text-sm text-slate-600">
          Yes — details/summary handles the toggle natively.
        </p>
      </details>
    </Accordion>
  );
}

Examples

With native details

Native details/summary gives you toggling, keyboard support, and find-in-page with no JavaScript.

Is it accessible?

The native details element handles keyboard and screen reader support.

Can I open several at once?

Yes. Each details element toggles independently.

Does it need JavaScript?

No. Toggling is entirely native browser behavior.

One open at a time

Give every details the same name attribute and the browser closes the others for you.

First

Opening another closes this one.

Second

Only one panel stays open at a time.

Third

The browser handles the exclusivity.

API Reference

Prop	Type	Default	Description
variant	'solid' \| 'ghost' \| 'outline' \| 'subtle'	'outline'	Style variant for the component.
color	'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'neutral'	'neutral'	Color scale used by the component.
className	string	—	Merged with the generated classes via cn().
...props	HTMLAttributes<HTMLDivElement>	—	All native attributes are forwarded to the root element.