ExpansionPanel

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

Copy Markdown

Renders 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.

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

Props

id

string | undefined

Unique identifier for the panel item (auto-generated if not provided)

value

V | undefined

Value associated with this panel item for v-model binding

disabled

MaybeRefOrGetter<boolean> | undefined

Disables this specific panel item

namespace

string | undefined

Namespace to retrieve the parent ExpansionPanelGroup context (default: 'v0:expansion-panel')

Default: "v0:expansion-panel"

Slots

default

ExpansionPanelRootSlotProps

ExpansionPanel.Activator

Props

namespace

string | undefined

Default: "v0:expansion-panel"

Slots

default

ExpansionPanelActivatorSlotProps

ExpansionPanel.Content

Props

namespace

string | undefined

Default: "v0:expansion-panel"

Slots

default

ExpansionPanelContentSlotProps

ExpansionPanel.Cue

Props

namespace

string | undefined

Default: "v0:expansion-panel"

Slots

default

ExpansionPanelCueSlotProps

ExpansionPanel.Group

Props

namespace

string | undefined

Namespace for dependency injection (default: 'v0:expansion-panel')

Default: "v0:expansion-panel"

disabled

boolean | undefined

Disables the entire expansion panel instance and all items

Default: false

enroll

boolean | undefined

Auto-expand non-disabled items when registered

Default: false

mandatory

boolean | "force" | undefined

Mandatory expansion behavior: - false (default): All panels can be collapsed - true: Prevents collapsing the last expanded panel - 'force': Automatically expands the first non-disabled panel

Default: false

multiple

boolean | undefined

Enable multi-expansion mode - false (default): Single panel expanded at a time (accordion mode) - true: Multiple panels can be expanded simultaneously Note: Changes v-model type from T to T[]

Default: false

Default: "v0:expansion-panel"

Slots

default

ExpansionPanelHeaderSlotProps