ExpansionPanel

A component for creating accordion-style expansion panels with proper ARIA support.

Copy Markdown

PreviewRenders elementIntermediate Apr 5, 2026

Usage

The ExpansionPanel component provides a wrapper and item pattern for managing expansion state in accordion-style interfaces. It uses the createSelection composable internally and provides full v-model support with automatic state synchronization.

Accordion Panels

Multiple expandable panels with accordion behavior and a multi-expand mode that allows several panels open at once.

Expanded:

Anatomy

<script setup lang="ts">
  import { ExpansionPanel } from '@vuetify/v0'
</script>

<template>
  <ExpansionPanel.Group>
    <ExpansionPanel.Root>
      <ExpansionPanel.Activator>
        <ExpansionPanel.Cue />
      </ExpansionPanel.Activator>

      <ExpansionPanel.Content />
    </ExpansionPanel.Root>
  </ExpansionPanel.Group>
</template>

For instances where you need to wrap the activator in a heading element (h3) for semantic purposes and WAI-ARIA, use the ExpansionPanel.Header component:

AnatomyWithHeader

<script setup lang="ts">
  import { ExpansionPanel } from '@vuetify/v0'
</script>

<template>
  <ExpansionPanel.Group>
    <ExpansionPanel.Root>
      <ExpansionPanel.Header>
        <ExpansionPanel.Activator>
          <ExpansionPanel.Cue />
        </ExpansionPanel.Activator>
      </ExpansionPanel.Header>

      <ExpansionPanel.Content />
    </ExpansionPanel.Root>
  </ExpansionPanel.Group>
</template>

API Reference

The following API details are for all variations of the ExpansionPanel component.

ExpansionPanel.Root

4 props, 1 slot

ExpansionPanel.Activator

1 prop, 1 slot

ExpansionPanel.Content

6 props, 1 event, 1 slot

ExpansionPanel.Header

1 prop, 1 slot