IAccordion ​

A list of panels where opening one is the whole interaction. Use it for questions with long answers, or settings a reader visits rarely — not for content they need side by side, which wants ITabs or no disclosure at all.

<script setup lang="ts">
const open = ref('Payment terms')

const faqs = [
  { label: 'Payment terms', content: 'Net 30 by default…' },
  { label: 'Editing a sent invoice', content: 'A sent invoice is a record…' },
]
</script>

<template>
  <IAccordion v-model="open" :items="faqs" />
</template>

The panel animates its height, so the rows below slide rather than jump. v-model holds the open item's value, which defaults to its label — give an item an explicit value when the label is long or likely to be reworded.

One panel or several ​

type="multiple" lets any number stand open, and the model becomes an array.

<script setup lang="ts">
const open = ref(['Payment terms'])
</script>

<template>
  <IAccordion v-model="open" :items="faqs" type="multiple" />
</template>

In single mode, collapsible (on by default) lets the open panel be closed again by clicking its own trigger. Turn it off when something must always be showing.

Outline ​

<IAccordion v-model="open" :items="items" variant="outline" />

plain is rules between rows and nothing else — the quieter of the two, and right when the accordion is the page. outline gives each item its own panel, which holds together better on a busy page where the rules would compete with everything around them.

An item can carry an icon, on either variant.

Markup in a panel ​

content is for text. Anything else goes in the content slot, which receives the item.

<IAccordion :items="items" variant="outline">
  <template #content="{ item }">
    <div class="flex flex-col gap-3">
      <p>{{ item.content }}</p>
      <div class="flex gap-2">
        <IButton size="sm" variant="outline">
          Open {{ item.label }}
        </IButton>
        <IButton size="sm" variant="ghost">
          Learn more
        </IButton>
      </div>
    </div>
  </template>
</IAccordion>

The trigger slot replaces the row's own content the same way — a badge beside the label, a count, a second line.

Props ​

v-model is a string for single and a string[] for multiple.

Slots ​

Item shape ​

interface AccordionItemData {
  label: string
  content?: string
  /** Identity in the model. Defaults to the label. */
  value?: string
  icon?: IconLike
  disabled?: boolean
}

Panel spacing lives on an inner wrapper, reachable as ui.contentInner. Put padding there rather than on ui.content, whose height is animated.