SutraUI.Accordion (Sutra UI v0.4.0)

View Source

A vertically stacked set of interactive headings that reveal content.

Accordions are useful for organizing content into collapsible sections, reducing visual clutter while keeping content accessible.

Examples

<.accordion>
  <:item title="Section 1" value="item-1">
    Content for section 1
  </:item>
  <:item title="Section 2" value="item-2">
    Content for section 2
  </:item>
</.accordion>

# Single mode (only one open at a time)
<.accordion type="single">
  <:item title="FAQ 1" value="faq-1">Answer 1</:item>
  <:item title="FAQ 2" value="faq-2">Answer 2</:item>
</.accordion>

Accessibility

  • Uses ARIA attributes for accordion disclosure state
  • Keyboard navigation with Enter/Space to toggle
  • aria-expanded indicates open/closed state
  • aria-controls links trigger to content panel

Summary

Functions

accordion(assigns)

Renders an accordion component.

Functions

accordion(assigns)

Renders an accordion component.

Attributes

  • type (:string) - Whether one or multiple items can be open. Defaults to "single". Must be one of "single", or "multiple".
  • default_value (:any) - The value(s) of items to open by default. Defaults to nil.
  • id (:string) - Unique identifier used to scope accordion state. Defaults to nil.
  • class (:string) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes.

Slots

  • item (required) - Accordion items. Accepts attributes:
    • value (:string) (required) - Unique identifier for the item.
    • title (:string) (required) - The header text.
    • disabled (:boolean) - Whether the item is disabled.