// 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") ?? "" state playground_id = ctx.url.searchParams.get("pg_id") ?? "accordion-example-1" state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"value\": \"first\",\n \"label\": \"Accordion #1\",\n \"content\": \"This is the item's accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.\"\n },\n {\n \"value\": \"second\",\n \"label\": \"Accordion #2\",\n \"content\": \"This is the item's accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.\"\n },\n {\n \"value\": \"third\",\n \"label\": \"Accordion #3\",\n \"content\": \"This is the item's accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.\"\n }\n]" state playground_defaultOpen = ctx.url.searchParams.get("pg_defaultOpen") ?? "[\n \"first\"\n]" state playground_multiple = ctx.url.searchParams.get("pg_multiple") ?? "false" state playground_alwaysOpen = ctx.url.searchParams.get("pg_alwaysOpen") ?? "false" state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" 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" state playground_bordered = ctx.url.searchParams.get("pg_bordered") ?? "false" state playground_separated = ctx.url.searchParams.get("pg_separated") ?? "false" state playground_flush = ctx.url.searchParams.get("pg_flush") ?? "false" state playground_contentItalic = ctx.url.searchParams.get("pg_contentItalic") ?? "true" seo { title = "Accordion" description = "Theme-aware, responsive accordion component." } view {
Base component

Accordion

Theme-aware, responsive accordion component.

17 props0 slots3 eventsTheme readyResponsive
Interactive playground

Configure Accordion

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

Live preview
Component code
<Accordion
  id="accordion-example-1"
  items='[
    {
      "value": "first",
      "label": "Accordion #1",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    },
    {
      "value": "second",
      "label": "Accordion #2",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    },
    {
      "value": "third",
      "label": "Accordion #3",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    }
  ]'
  defaultOpen='[
    "first"
  ]'
  contentItalic="true"
/>
Component props17 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Basic usage

Default accordion

Open one section at a time with a clear plus and minus indicator.

01
Live preview
Component usage.wrn
<Accordion
  id="accordion-example-1"
  items='[
    {
      "value": "first",
      "label": "Accordion #1",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    },
    {
      "value": "second",
      "label": "Accordion #2",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    },
    {
      "value": "third",
      "label": "Accordion #3",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    }
  ]'
  defaultOpen='[
    "first"
  ]'
  contentItalic="true"
/>
Behavior

Always open

Allow several content sections to remain expanded at the same time.

02
Live preview
Component usage.wrn
<Accordion
  id="accordion-example-2"
  items='[
    {
      "value": "first",
      "label": "Accordion #1",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    },
    {
      "value": "second",
      "label": "Accordion #2",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    },
    {
      "value": "third",
      "label": "Accordion #3",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    }
  ]'
  defaultOpen='[
    "first",
    "second"
  ]'
  alwaysOpen="true"
  contentItalic="true"
/>
Composition

Nested accordion

Place a coordinated secondary accordion inside an expanded parent section.

03
Live preview
Component usage.wrn
<Accordion
  id="accordion-example-3"
  items='[
    {
      "value": "first",
      "label": "Accordion #1",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.",
      "children": [
        {
          "value": "sub-first",
          "label": "Sub accordion #1",
          "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
        },
        {
          "value": "sub-second",
          "label": "Sub accordion #2",
          "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
        },
        {
          "value": "sub-third",
          "label": "Sub accordion #3",
          "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
        }
      ]
    },
    {
      "value": "second",
      "label": "Accordion #2",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    },
    {
      "value": "third",
      "label": "Accordion #3",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    }
  ]'
  defaultOpen='[
    "first",
    "first.sub-first"
  ]'
  alwaysOpen="true"
  contentItalic="true"
/>
Indicators

Without an indicator

Use a minimal text-only accordion when visual indicators are unnecessary.

04
Live preview
Component usage.wrn
<Accordion
  id="accordion-example-4"
  items='[
    {
      "value": "first",
      "label": "Accordion #1",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    },
    {
      "value": "second",
      "label": "Accordion #2",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    },
    {
      "value": "third",
      "label": "Accordion #3",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    }
  ]'
  defaultOpen='[
    "first"
  ]'
  showIndicator="false"
  contentItalic="true"
/>
Indicators

Chevron indicator

Communicate expanded state with a rotating chevron.

05
Live preview
Component usage.wrn
<Accordion
  variant="chevron"
  id="accordion-example-5"
  items='[
    {
      "value": "first",
      "label": "Accordion #1",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    },
    {
      "value": "second",
      "label": "Accordion #2",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    },
    {
      "value": "third",
      "label": "Accordion #3",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    }
  ]'
  defaultOpen='[
    "first"
  ]'
  indicator="chevron"
  contentItalic="true"
/>
Layout

Separated title and indicator

Place the title and state indicator at opposite ends of each trigger.

06
Live preview
Component usage.wrn
<Accordion
  variant="chevron"
  id="accordion-example-6"
  items='[
    {
      "value": "first",
      "label": "Accordion #1",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    },
    {
      "value": "second",
      "label": "Accordion #2",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    },
    {
      "value": "third",
      "label": "Accordion #3",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    }
  ]'
  defaultOpen='[
    "first"
  ]'
  indicator="chevron"
  indicatorPosition="end"
  contentItalic="true"
/>
Surface

Bordered accordion

Group sections inside one bordered surface with dividing lines.

07
Live preview
Component usage.wrn
<Accordion
  id="accordion-example-7"
  items='[
    {
      "value": "first",
      "label": "Accordion #1",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    },
    {
      "value": "second",
      "label": "Accordion #2",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    },
    {
      "value": "third",
      "label": "Accordion #3",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    }
  ]'
  defaultOpen='[
    "first"
  ]'
  bordered="true"
  contentItalic="true"
/>
Surface

Bordered open content

Render each section as an independent rounded card.

08
Live preview
Component usage.wrn
<Accordion
  id="accordion-example-8"
  items='[
    {
      "value": "first",
      "label": "Accordion #1",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    },
    {
      "value": "second",
      "label": "Accordion #2",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    },
    {
      "value": "third",
      "label": "Accordion #3",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    }
  ]'
  defaultOpen='[
    "second"
  ]'
  indicatorPosition="end"
  separated="true"
  contentItalic="true"
/>
States

Disabled section

Disable an individual section while keeping the rest of the accordion interactive.

09
Live preview
Component usage.wrn
<Accordion
  id="accordion-example-9"
  items='[
    {
      "value": "first",
      "label": "Accordion #1",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    },
    {
      "value": "second",
      "label": "Accordion #2",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.",
      "disabled": true
    },
    {
      "value": "third",
      "label": "Accordion #3",
      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
    }
  ]'
  defaultOpen='[
    "first"
  ]'
  contentItalic="true"
/>
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

@changeFires when the component value or selection changes.
@openFires when the component opens.
@closeFires when the component closes.
Event listener.js
const component = document.querySelector('[data-wrn-events]')

component.addEventListener('change', (event) => {
  console.log(event.detail)
})
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
itemsstring[]No
defaultOpenstring[]No
multiplebooleanfalseNo
alwaysOpenbooleanfalseNo
disabledbooleanfalseNo
indicatorstring"plus"No
indicatorPositionstring"start"No
showIndicatorbooleantrueNo
borderedbooleanfalseNo
separatedbooleanfalseNo
flushbooleanfalseNo
contentItalicbooleanfalseNo
} }