LanternUI.Components.Accordion (LanternUI v0.9.0)

Copy Markdown View Source

Accordion — a WAI-ARIA APG accordion with the Fluxon 2.3.1 composition API.

<.accordion id="faq">
  <.accordion_item id="shipping" expanded>
    <:header>Shipping</:header>
    <:panel>We ship worldwide.</:panel>
  </.accordion_item>
  <.accordion_item id="returns" icon={false}>
    <:header class="font-bold">Returns</:header>
    <:panel class="prose">Thirty days, no questions asked.</:panel>
  </.accordion_item>
</.accordion>

The server renders the complete accessible anatomy and initial state. The LanternAccordion hook owns toggling, single/multiple-open enforcement, and the optional ArrowUp/ArrowDown/Home/End header navigation from the APG. Panels remain in the DOM and use hidden when collapsed, keeping ARIA idrefs valid while removing collapsed content from the tab order and accessibility tree. Hook-owned state is restored after LiveView patches.

The accordion is Zag-driven (a @zag-js/accordion state machine, loaded on demand): the hook root carries data-zag plus data-scope="accordion" / data-part anatomy, and Zag owns expanded state, open enforcement, and keyboard navigation. Item identity is the stable item id. Two modes:

  • client (default) — Zag owns the value from the initial expanded flags.
  • server-driven (controlled) — the server value (value, a list of expanded item ids) is truth; toggles flow out through on_change, patches flow in.

Summary

Functions

accordion(assigns)
accordion_item(assigns)

Functions

accordion(assigns)

Attributes

  • id (:string) - Stable accordion id. A unique id is generated when omitted.
  • class (:any) - Extra classes merged onto the accordion root. Defaults to nil.
  • multiple (:boolean) - Allow more than one item to be expanded at once. Defaults to false.
  • prevent_all_closed (:boolean) - Keep at least one enabled item expanded. Defaults to false.
  • animation_duration (:integer) - Expand/collapse indicator transition duration in milliseconds. Defaults to 300.
  • controlled (:boolean) - Server-driven value: value is truth, patches flow into the machine. Defaults to false.
  • value (:list) - Expanded item ids for controlled mode (client mode ignores it). Defaults to nil.
  • on_change (:string) - Server event pushed on toggle (lantern:accordion:set-value replies). Defaults to nil.
  • on_change_client (:string) - Bubbling DOM CustomEvent dispatched on toggle. Defaults to nil.
  • Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

accordion_item(assigns)

Attributes

  • id (:string) - Stable item id used to connect its header and panel. A unique id is generated when omitted.
  • class (:any) - Extra classes merged onto the item root. Defaults to nil.
  • expanded (:boolean) - Whether this item starts expanded. Defaults to false.
  • icon (:boolean) - Whether to render the built-in chevron. Defaults to true.
  • Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

  • header (required) - Always-visible header content. Accepts attributes:
    • class (:any) - Extra classes merged onto the header button.
  • panel (required) - Expandable panel content. Accepts attributes:
    • class (:any) - Extra classes merged onto the panel content wrapper.