A simple accordion with expandable panels controlled via the value prop.

By default, a single panel is open at a time. Enable multiple to allow multiple panels to stay open.

Control the active panel state with value and update:value.

The trigger can be tailored per panel; the toggleicon slot animates a custom icon via the header's data-p attribute, while the asChild slot exposes onClick and active so the toggle can be rendered as any element, such as a Button.

The toggleicon slot customizes the indicator. It can switch between two icons using the active context variable, or render a single icon that animates purely with CSS by targeting the header's data-p attribute.

Set disabled on an AccordionPanel to prevent user interaction with that panel.

Create accordion panels dynamically by iterating over a data source to keep structure consistent and reusable.

RadioButton component can be used to group multiple AccordionPanel components.

AccordionPanel can be generated dynamically using the standard v-for directive.

Screen Reader

Accordion header elements have a button role and use aria-controls to define the id of the content section along with aria-expanded for the visibility state. The value to read a header element defaults to the value of the header property and can be customized by defining an aria-label or aria-labelledby property. Each header has a heading role, for which the level is customized by headerAriaLevel and has a default level of 2 as per W3C specifications.

Disabled accordions headers use aria-disabled and are excluded from the keyboard navigation.

The content uses region role, defines an id that matches the aria-controls of the header and aria-labelledby referring to the id of the header.

Header Keyboard Support