Skip to content 
Content 1 Content 2 Content 3
Content 1 Content 2 Content 3 Accordion 1Content 1Accordion 2Content 2Accordion 3Content 3
Content 1 Content 2 Content 3
AccordionGroup 🟠 Not ready
The AccordionGroup component can be used imported from:
Playground
Parameters
Events
This component has events. Check the documentation about how to use the events.
| Name | Payload | Description |
|---|---|---|
@change | number | Fires when the accordion item is changed |
Slots
This component has slots. Check the documentation about how to use the slots.
| Name | Tags | Description |
|---|---|---|
default | span | The content of the accordion group |
Parameters use
Check the documentation about how to use the parameters.
modelValue
Attention!
If you hardcode this value, it will not be reactive and the selection won't change. Use a variable instead and, ideally, a closed loop.
You can set the model for the current accordion inside the AccordionGroup component:
accordions
We can pass the information of the accordions via the accordions attribute:
Or simply slotting the Accordion components:
We can use the summary-<index> as content-<index> slots to define the content of the accordions:
config
The config attribute it's used to define the size of the accordion group. You can set it as l to make it larger.
Browser support
Detected engine:
Chromium
Webkit
Gecko
CodeSandbox example
Sorry, not available yet ☹️