Accordion

One or more collapsible sections, with roving-focus keyboard navigation.

<div
  data-controller="zag-accordion"
  data-part="root"
  data-zag-accordion-collapsible-value="true"
  class="divide-border border-border bg-popover w-full max-w-md divide-y rounded-lg border"
>
  <div data-part="item" data-value="shipping" class="px-4">
    <h3>
      <button
        data-part="item-trigger"
        class="text-foreground focus-visible:ring-ring data-[state=open]:text-primary flex w-full items-center justify-between py-4 text-left text-sm font-medium focus:outline-none focus-visible:ring-2"
      >
        How long does shipping take?
        <span
          data-part="item-indicator"
          class="text-muted-foreground transition-transform data-[state=open]:rotate-180"
          aria-hidden="true"
          >▾</span
        >
      </button>
    </h3>
    <div data-part="item-content" hidden class="text-muted-foreground pb-4 text-sm">
      Orders ship within 1–2 business days and arrive in about a week.
    </div>
  </div>

  <div data-part="item" data-value="returns" class="px-4">
    <h3>
      <button
        data-part="item-trigger"
        class="text-foreground focus-visible:ring-ring data-[state=open]:text-primary flex w-full items-center justify-between py-4 text-left text-sm font-medium focus:outline-none focus-visible:ring-2"
      >
        What is your return policy?
        <span
          data-part="item-indicator"
          class="text-muted-foreground transition-transform data-[state=open]:rotate-180"
          aria-hidden="true"
          >▾</span
        >
      </button>
    </h3>
    <div data-part="item-content" hidden class="text-muted-foreground pb-4 text-sm">
      Returns are free within 30 days, no questions asked.
    </div>
  </div>
</div>

Parts

root, item, item-trigger, item-content, item-indicator.

Each section is a data-part="item" carrying data-value; its item-trigger, item-content, and item-indicator live inside it and inherit that value.

Values

Attribute	Type	Default	Description
data-zag-accordion-multiple-value	Boolean	false	Allow multiple sections open at once.
data-zag-accordion-collapsible-value	Boolean	false	Allow closing the open section.
data-zag-accordion-orientation-value	String	"vertical"	"vertical" or "horizontal".
data-zag-accordion-disabled-value	Boolean	false	Disable the whole accordion.
data-zag-accordion-value-value	Array	[]	Section value(s) open by default (JSON).

Events

Emits zag-accordion:change — detail is { value: string[] } (the currently expanded values).