Collapsible

A single show/hide region (the disclosure primitive behind FAQ rows, "show more" sections, etc.).

<div
  data-controller="zag-collapsible"
  data-part="root"
  class="border-border bg-popover w-full rounded-lg border p-4"
>
  <button
    data-part="trigger"
    class="focus-visible:ring-ring flex w-full items-center justify-between text-left text-sm font-medium focus:outline-none focus-visible:ring-2"
  >
    Advanced options
    <span
      data-part="indicator"
      class="text-muted-foreground transition-transform data-[state=open]:rotate-180"
      aria-hidden="true"
      >▾</span
    >
  </button>
  <div data-part="content" hidden class="text-muted-foreground pt-3 text-sm">
    These settings are for power users and rarely need changing.
  </div>
</div>

Parts

root, trigger, content, indicator.

Values

Attribute	Type	Default	Description
data-zag-collapsible-open-value	Boolean	false	Open by default.
data-zag-collapsible-disabled-value	Boolean	false	Disable toggling.

Events

Emits zag-collapsible:change — detail is { open }.

Programmatic control

open(), close(), isOpen.