1.22.2
Back to components
Components

Accordion

A stacked set of collapsible panels.

Component

Props

Props Required Type
itemstrueAccordionItem[]

Usage

items

An array of objects used to render each accordion entry. Each object must follow the AccordionItem interface with at least id, title, and content fields. Optionally, you can include a group key to organize related items.

 <template>
    <Accordion :items="items" />
</template>

<script setup lang="ts">
const items: AccordionItem[] = [
    {
        id: 1,
        title: 'Item one',
        content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quibusdam!',
    },
    {
        id: 2,
        title: 'Item two',
        content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quibusdam!',
    },
    {
        id: 3,
        title: 'Item three',
        content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quibusdam!',
    },
    {
        id: 4,
        title: 'Item four',
        content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quibusdam!',
    },
    {
        id: 5,
        title: 'Item five',
        content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quibusdam!',
    },
]
</script>

TypeScript interface

 interface AccordionItem {
    id: number
    title: string
    content: string
    group?: string
}