Accordion

A vertically stacked list of items that can be expanded or collapsed. Supports single or multiple open items and full keyboard navigation.

Anatomy

Accordion is a single component. You shape every part through named slots:

• #trigger: Content rendered inside the trigger button. Defaults to the item label.
• #icon: Optional chevron or indicator rendered after the trigger content.
• #content: Panel body revealed when the item is open.
• #[item.slot]: Per-item override when an item has a slot key.

The trigger button itself is rendered by the component; use the ui.trigger prop to add classes to it.

Usage

<script setup lang="ts">
import { Accordion } from "akaza-ui";

const items = [
  { value: "a", label: "What is Akaza UI?", content: "A headless Vue component library with a Vue-native slots API." },
  { value: "b", label: "Is it styled?", content: "No — bring your own CSS, Tailwind, or any design system." },
  { value: "c", label: "Is it accessible?", content: "Yes, fully WAI-ARIA compliant with keyboard navigation built in." },
];
</script>

<template>
  <Accordion
    :items="items"
    collapsible
    :ui="{ trigger: 'px-4 py-3 hover:bg-neutral-50' }"
  >
    <template #trigger="{ item }">
      <span>{{ item.label }}</span>
    </template>
    <template #icon="{ isOpen }">
      <svg :class="{ 'rotate-180': isOpen }" />
    </template>
    <template #content="{ item }">
      <p>{{ item.content }}</p>
    </template>
  </Accordion>
</template>

Examples

Custom trigger and icon

The #trigger slot is rendered inside the trigger button — use it to customise the label content. Style the button itself with ui.trigger. Use #icon to override the chevron indicator.

<template>
  <Accordion :items="items" :ui="{ trigger: 'px-4 py-3 hover:bg-neutral-50' }">
    <template #trigger="{ item, isOpen }">
      <span :class="['trigger-label', { 'trigger-label--open': isOpen }]">
        {{ item.label }}
      </span>
    </template>

    <template #icon="{ isOpen }">
      <svg :class="['icon', { 'icon--open': isOpen }]" .../>
    </template>
  </Accordion>
</template>

Multiple open items

Use type="multiple" when more than one accordion panel should stay open at the same time.

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

Per-item custom content

Give an item a slot key to render rich content in its panel.

<script setup lang="ts">
const items = [
  { value: "form", label: "Contact us", slot: "contact-form" },
];
</script>

<template>
  <Accordion :items="items">
    <template #contact-form="{ close }">
      <form @submit.prevent="close">
        <input type="email" placeholder="your@email.com" />
        <button type="submit">Send</button>
      </form>
    </template>
  </Accordion>
</template>

API Reference

Props

AccordionItem

Slots

Emits

UI Options

Styling Hooks