Expansion Panel

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 expandable property, the expansion-panel can remain open until explicitly closed.

Usage

Accordion expansion-panels can only have 1 panel open at a time.


API

v-expansion-panel
Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
disabled
Default
false
Type
boolean

Disables the entire expansion-panel

Name
expand
Default
false
Type
boolean

Leaves the expansion-panel open while selecting another

Name
focusable
Default
false
Type
boolean

Makes the expansion-panel headers focusable

Name
inset
Default
false
Type
boolean

Makes the expansion-panel open with a inset style

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
popout
Default
false
Type
boolean

Makes the expansion-panel open with an popout style

Name
readonly
Default
false
Type
boolean

Makes the entire expansion-panel read only.

Name
value
Default
null
Type
number | array

Controls the opened/closed state of content in the expansion-panel. Corresponds to a zero-based index of the currently opened content. If expand prop is used then it is an array of booleans where the index corresponds to the index of the content.

Examples

Expand

Expand expansion-panels will stay open until closed. When providing a model, any value not specified will be interpreted as false.


External control

Expansion panels can be controlled externally by modifying the v-model. Its value corresponds to a zero-based index of the currently opened expansion panel content. If expand prop is used then it is an array of booleans where the index corresponds to the index of the content.


Disabled and readonly

Both the expansion-panel and its content supports the disabled and readonly props.


Popout & Inset

The expansion-panel also has two alternative designs you can activate with the props popout and inset.


Custom icon

Expand action icon can be customized with expand-icon prop.


Focusable

The expansion-panel headers can be made focusable with the prop focusable.