Renders an accordion.

<.accordion id="faq" exclusive>
  <:item title="Can I cancel?" open>Yes, any time.</:item>
  <:item title="Do you offer refunds?">Within 30 days.</:item>
</.accordion>

exclusive uses the name attribute so opening one item closes the others, entirely in the browser. Items animate open and closed where the browser supports ::details-content. Keyboard: Enter/Space toggle (native), ArrowUp/ArrowDown move between headers, Home/End jump to the first/last.

Attributes

• id (:string) (required)
• exclusive (:boolean) - Defaults to false.
• variant (:string) - Defaults to "default". Must be one of "default", or "separated".
• heading_level (:string) - Defaults to "h3".
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• item (required) - Accepts attributes:
  • title (:string) (required)
  • open (:boolean)
  • id (:string)