Expansion panels

The v-expansion-panel component is useful for reducing vertical space with large amounts of information. The default functionality of the component is to only display one expansion-panel body at a time; however, with the multiple property, the expansion-panel can remain open until explicitly closed.


Expansion panels in their simplest form display a list of expandable items. You can either declare the markup explicitly, or use the title and text props.


v-expansion-panelsPrimary component
v-expansion-panelSub-component that wraps v-expansion-panel-text and v-expansion-panel-title
v-expansion-panel-titleSub-component used to display the Expansion Panel’s title. Wraps the #title slot
v-expansion-panel-textSub-component used to display the Expanion Panel’s text. Wraps the #text slot




There are four different variants of the expansion-panel. Accordion expansion-panels have no margins around the currently active panel. Inset expansion-panels become smaller when activated, while poput expansion-panels become larger.


Both the expansion-panel and its content can be disabled using the disabled prop.


Expansion panels can be controlled externally by using the v-model. You will need to set a value on each panel, so that you can refer to them outside the component. If the multiple prop is set, then the v-model value will be an array.


readonly prop does the same thing as disabled, but it doesn’t touch styles.



The expansion panel component provides a rich playground to build truly advanced implementations. Here we take advantage of slots in the v-expansion-panel-header component to react to the state of being open or closed by fading content in and out.

Custom icon

Expand action icon can be customized with expand-icon prop or the actions slot.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub