Accordion

Native details and summary disclosure for useful FAQ answers and independently open sections.

When to use it. Use it when readers should reveal authored content in place without requiring application state or a script runtime.

Native disclosure Exclusive grouping Animated content Intrinsic size Exact fallback

Exclusive FAQ

Is it accessible?

Yes — <details>/<summary> ship with keyboard support and correct semantics, and the content stays in the DOM for crawlers and find-in-page.

Can it animate height: auto?

Yes. interpolate-size: allow-keywords on the wrapper lets ::details-content transition from height: 0 to height: auto. No measuring, no JavaScript.

Only one open at a time?

The name attribute makes the group exclusive — the browser closes the others for you.

<.accordion id="faq" mode={:exclusive}>
  <:item key="accessibility" summary="Is it accessible?" open>
    Yes — <code>&lt;details&gt;</code>/<code>&lt;summary&gt;</code> ship with keyboard support and
    correct semantics, and the content stays in the DOM for crawlers and find-in-page.
  </:item>
  <:item key="animation" summary="Can it animate height: auto?">
    Yes. <code>interpolate-size: allow-keywords</code> on the wrapper lets
    <code>::details-content</code> transition from <code>height: 0</code> to
    <code>height: auto</code>. No measuring, no JavaScript.
  </:item>
  <:item key="grouping" summary="Only one open at a time?">
    The <code>name</code> attribute makes the group exclusive — the browser closes the others
    for you.
  </:item>
</.accordion>

Independent sections

Account guidance

Review your profile details and keep the contact information current.

Privacy guidance

Review the application's privacy notice before sharing personal information.

Support guidance

Use the application's ordinary support destination when you need more help.

<.accordion id="faq-sections" mode={:independent}>
  <:item key="account" summary="Account guidance" open>
    Review your profile details and keep the contact information current.
  </:item>
  <:item key="privacy" summary="Privacy guidance" open>
    Review the application's privacy notice before sharing personal information.
  </:item>
  <:item key="support" summary="Support guidance">
    Use the application's ordinary support destination when you need more help.
  </:item>
</.accordion>

How it works

<details><summary> Each item renders one details and summary pair. Mode :exclusive gives the details elements one shared name; mode :independent omits it. The first authored open item is preserved for an exclusive group and every authored open item is preserved for independent sections.
name="faq" The details name attribute requests native exclusive grouping. Engines without that behavior keep independent native disclosures.
open The open item attribute supplies the initial server-rendered state; no gallery or package runtime stores later disclosure state.
id + item key The accordion id and each closed item key form deterministic details, summary, and content IDs, so callers must keep them stable across renders.
application boundary The application owns the questions and answers, replacing or updating content, persistence across navigation, and any outcomes linked from an answer.

Examples use package semantic tokens in explicit light and dark scopes.

Accessibility and browser support

Native summary activation, focus, keyboard behavior, and find-in-page remain browser-owned. Heading hierarchy and answer content remain caller-owned.

Accordion support and fallback
Feature	Locked-engine evidence	When missing
Exclusive grouping	The locked Chromium 151, Firefox 153, and WebKit 26.5 matrix exercises native details operation; grouping is asserted only when the engine exposes the details name capability.	Items remain separate native details elements, so more than one answer may be open.
Animated content	The locked engine matrix checks disclosure outcomes while the package gates animation with @supports selector(details::details-content).	Answers open and close instantly; reduced-motion policy deliberately selects the same behavior.
Intrinsic size	The package requests allow-keywords only inside the complete details-content capability gate; locked-engine outcomes remain native and usable regardless of support.	Answers open and close instantly; reduced-motion policy deliberately selects the same behavior.

Application ownership and API

The application owns the questions and answers, replacing or updating content, persistence across navigation, and any outcomes linked from an answer.

Choosing the related control. Choose exclusive mode for one-open-at-a-time questions. Choose independent mode when several answers may stay open; it is not a tab widget and does not add arrow-key focus management.

Public API Package source

Provenance

Catalogue identity disclosure.accordion, adapted from unscripted/ui commit bd8f403030c8d1f46804da6eda733fde7e908e63 under its MIT notice.

The documentation presentation is adapted locally; ShadcnUI's Phoenix API and native semantic contract remain authoritative.

Adapt Accordion presentation onto deterministic native details and summary HEEX items with independent or progressively exclusive grouping, server-rendered open snapshots, and capability-gated motion without package state or JavaScript.