// Generated by scripts/generate-showcase.mjs. Do not edit directly. page AccordionDetail { layout = "showcase" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" state playground_id = ctx.url.searchParams.get("pg_id") ?? "accordion" state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"accordion-0-1\",\"key\":\"accordion-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#accordion-demo\",\"actionHref\":\"#accordion-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"accordion-0-2\",\"key\":\"accordion-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#accordion-demo\",\"actionHref\":\"#accordion-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]") state playground_defaultOpen = JSON.parse(ctx.url.searchParams.get("pg_defaultOpen") ?? "[{\"id\":\"accordion-0-1\",\"key\":\"accordion-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#accordion-demo\",\"actionHref\":\"#accordion-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"accordion-0-2\",\"key\":\"accordion-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#accordion-demo\",\"actionHref\":\"#accordion-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]") state playground_multiple = (ctx.url.searchParams.get("pg_multiple") ?? "false") === "true" state playground_alwaysOpen = (ctx.url.searchParams.get("pg_alwaysOpen") ?? "false") === "true" state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true" state playground_indicator = ctx.url.searchParams.get("pg_indicator") ?? "plus" state playground_indicatorPosition = ctx.url.searchParams.get("pg_indicatorPosition") ?? "start" state playground_showIndicator = (ctx.url.searchParams.get("pg_showIndicator") ?? "true") === "true" state playground_bordered = (ctx.url.searchParams.get("pg_bordered") ?? "false") === "true" state playground_separated = (ctx.url.searchParams.get("pg_separated") ?? "false") === "true" state playground_flush = (ctx.url.searchParams.get("pg_flush") ?? "false") === "true" state playground_contentItalic = (ctx.url.searchParams.get("pg_contentItalic") ?? "false") === "true" seo { title = "Accordion" description = "Theme-aware, responsive accordion component." } view {
Base component

Accordion

Theme-aware, responsive accordion component.

17 props0 slots3 outputsTheme readyResponsive
Interactive playground

Configure Accordion

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<Accordion
  items='[
    {
      "id": "accordion-0-1",
      "key": "accordion-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#accordion-demo",
      "actionHref": "#accordion-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "accordion-0-2",
      "key": "accordion-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#accordion-demo",
      "actionHref": "#accordion-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  defaultOpen='[
    {
      "id": "accordion-0-1",
      "key": "accordion-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#accordion-demo",
      "actionHref": "#accordion-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "accordion-0-2",
      "key": "accordion-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#accordion-demo",
      "actionHref": "#accordion-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
/>
Event outputInteract with the preview to inspect the typed payload.
Component props17 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

01
Live preview
Component usage.wrn
<Accordion
  items='[
    {
      "id": "accordion-0-1",
      "key": "accordion-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#accordion-demo",
      "actionHref": "#accordion-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "accordion-0-2",
      "key": "accordion-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#accordion-demo",
      "actionHref": "#accordion-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  defaultOpen='[
    {
      "id": "accordion-0-1",
      "key": "accordion-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#accordion-demo",
      "actionHref": "#accordion-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "accordion-0-2",
      "key": "accordion-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#accordion-demo",
      "actionHref": "#accordion-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
/>
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

02
Live preview
Component usage.wrn
<Accordion
  size="sm"
  variant="secondary"
  items='[
    {
      "id": "accordion-1-1",
      "key": "accordion-1-1",
      "value": "primary",
      "label": "Secondary workflow",
      "title": "Secondary workflow",
      "description": "A compact configuration designed for dense application layouts.",
      "text": "A configurable sample message.",
      "href": "#accordion-demo",
      "actionHref": "#accordion-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--zap]",
      "iconClass": "icon-[lucide--zap]",
      "variant": "secondary",
      "status": "Active",
      "time": "10:15",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 24,
      "percentage": 48,
      "color": "#0284c7",
      "target": "_self",
      "ariaLabel": "Open secondary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "accordion-1-2",
      "key": "accordion-1-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A compact configuration designed for dense application layouts.",
      "text": "Another configurable message.",
      "href": "#accordion-demo",
      "actionHref": "#accordion-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--zap]",
      "iconClass": "icon-[lucide--zap]",
      "variant": "secondary",
      "status": "Active",
      "time": "10:15",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 48,
      "percentage": 48,
      "color": "#0284c7",
      "target": "_self",
      "ariaLabel": "Open secondary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  defaultOpen='[
    {
      "id": "accordion-1-1",
      "key": "accordion-1-1",
      "value": "primary",
      "label": "Secondary workflow",
      "title": "Secondary workflow",
      "description": "A compact configuration designed for dense application layouts.",
      "text": "A configurable sample message.",
      "href": "#accordion-demo",
      "actionHref": "#accordion-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--zap]",
      "iconClass": "icon-[lucide--zap]",
      "variant": "secondary",
      "status": "Active",
      "time": "10:15",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 24,
      "percentage": 48,
      "color": "#0284c7",
      "target": "_self",
      "ariaLabel": "Open secondary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "accordion-1-2",
      "key": "accordion-1-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A compact configuration designed for dense application layouts.",
      "text": "Another configurable message.",
      "href": "#accordion-demo",
      "actionHref": "#accordion-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--zap]",
      "iconClass": "icon-[lucide--zap]",
      "variant": "secondary",
      "status": "Active",
      "time": "10:15",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 48,
      "percentage": 48,
      "color": "#0284c7",
      "target": "_self",
      "ariaLabel": "Open secondary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
/>
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

03
Live preview
Component usage.wrn
<Accordion
  size="lg"
  variant="success"
  items='[
    {
      "id": "accordion-2-1",
      "key": "accordion-2-1",
      "value": "primary",
      "label": "Advanced workflow",
      "title": "Advanced workflow",
      "description": "A richer configuration with more supporting information and actions.",
      "text": "A configurable sample message.",
      "href": "#accordion-demo",
      "actionHref": "#accordion-demo",
      "actionLabel": "Explore workflow",
      "icon": "icon-[lucide--circle-check]",
      "iconClass": "icon-[lucide--circle-check]",
      "variant": "success",
      "status": "Complete",
      "time": "11:45",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 32,
      "percentage": 91,
      "color": "#059669",
      "target": "_self",
      "ariaLabel": "Open advanced workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Unlimited"
      ]
    },
    {
      "id": "accordion-2-2",
      "key": "accordion-2-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A richer configuration with more supporting information and actions.",
      "text": "Another configurable message.",
      "href": "#accordion-demo",
      "actionHref": "#accordion-demo",
      "actionLabel": "Explore workflow",
      "icon": "icon-[lucide--circle-check]",
      "iconClass": "icon-[lucide--circle-check]",
      "variant": "success",
      "status": "Complete",
      "time": "11:45",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": true,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 64,
      "percentage": 91,
      "color": "#059669",
      "target": "_self",
      "ariaLabel": "Open advanced workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Unlimited"
      ]
    }
  ]'
  defaultOpen='[
    {
      "id": "accordion-2-1",
      "key": "accordion-2-1",
      "value": "primary",
      "label": "Advanced workflow",
      "title": "Advanced workflow",
      "description": "A richer configuration with more supporting information and actions.",
      "text": "A configurable sample message.",
      "href": "#accordion-demo",
      "actionHref": "#accordion-demo",
      "actionLabel": "Explore workflow",
      "icon": "icon-[lucide--circle-check]",
      "iconClass": "icon-[lucide--circle-check]",
      "variant": "success",
      "status": "Complete",
      "time": "11:45",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 32,
      "percentage": 91,
      "color": "#059669",
      "target": "_self",
      "ariaLabel": "Open advanced workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Unlimited"
      ]
    },
    {
      "id": "accordion-2-2",
      "key": "accordion-2-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A richer configuration with more supporting information and actions.",
      "text": "Another configurable message.",
      "href": "#accordion-demo",
      "actionHref": "#accordion-demo",
      "actionLabel": "Explore workflow",
      "icon": "icon-[lucide--circle-check]",
      "iconClass": "icon-[lucide--circle-check]",
      "variant": "success",
      "status": "Complete",
      "time": "11:45",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": true,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 64,
      "percentage": 91,
      "color": "#059669",
      "target": "_self",
      "ariaLabel": "Open advanced workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Unlimited"
      ]
    }
  ]'
/>
Component outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@changeFires when the component's committed value or selection changes.
@openFires after the component opens.
@closeFires after the component closes.
Declarative handlers.wrn
<Accordion
  @change='console.log(payload)'
  @open='console.log(payload)'
  @close='console.log(payload)'
/>
Direct output handlers.js
import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"Accordion\"], [data-component=\"Accordion\"]")

if (component) registerOutputHandler(component, "change", (payload) => {
  console.log("change", payload)
})

if (component) registerOutputHandler(component, "open", (payload) => {
  console.log("open", payload)
})

if (component) registerOutputHandler(component, "close", (payload) => {
  console.log("close", payload)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
variantstring"default"No
classstring""No
idstring"accordion"No
itemsunknown[][]No
defaultOpenunknown[][]No
multiplebooleanfalseNo
alwaysOpenbooleanfalseNo
disabledbooleanfalseNo
indicatorstring"plus"No
indicatorPositionstring"start"No
showIndicatorbooleantrueNo
borderedbooleanfalseNo
separatedbooleanfalseNo
flushbooleanfalseNo
contentItalicbooleanfalseNo
} }