Accordion

An animated, accessible panel that reveals or hides content when the user clicks its heading. Follows the controlled component pattern — the consumer manages open state.

Default

Closed by default. Click the header to expand or collapse the panel.

Diwa is a Stencil-based design system that provides accessible, themed web components. It follows a controlled component pattern throughout.

<diwa-accordion heading="What is diwa?">Diwa is a Stencil-based design system that provides accessible, themed web components. It follows a controlled component pattern throughout.</diwa-accordion>

Open by default

Pass open=true to render the accordion in the expanded state on first load.

This accordion starts in the open state by passing open={true}. The consumer controls what state it is in at any time.

<diwa-accordion heading="Open by default" open>This accordion starts in the open state by passing open={true}. The consumer controls what state it is in at any time.</diwa-accordion>

Dense mode (compact)

The compact prop enables dense mode and reduces header padding and font size.

The compact prop enables dense mode and reduces header padding and font size for sidebars, data tables, or configuration panels.

<diwa-accordion heading="Dense mode (compact)" compact>The compact prop enables dense mode and reduces header padding and font size for sidebars, data tables, or configuration panels.</diwa-accordion>

Group — FAQ pattern

Multiple independently controlled accordions. The consumer owns state for each panel.

Listen to the update event on the accordion element. The event detail contains { open: boolean } representing the requested new state. Set your local state, then pass it back to the open prop.

Yes — because each accordion manages nothing internally, the consumer decides. Keep separate open booleans per item to allow multiple panels open simultaneously, or track a single active index for exclusive behaviour.

Choose the level that fits your page heading hierarchy at the point the accordion appears. If the nearest ancestor heading is h2, use headingTag="h3". The default is h2 — appropriate for top-level FAQ sections.

<diwa-accordion heading="How do I control the open state?" open="false">
  Listen to the update event. The detail contains { open: boolean } — set your local state and pass it back.
</diwa-accordion>
<diwa-accordion heading="Can multiple accordions be open at the same time?" open="false">
  Yes — each accordion has no internal state. Track a separate open boolean per item.
</diwa-accordion>
<diwa-accordion heading="What heading level should I pick?" open="false">
  Choose the level that fits your page hierarchy. The default heading tag is h2.
</diwa-accordion>