---
title: "MazAccordion"
description: "MazAccordion is a standalone component that allows you to create an accordion with a title and content."
package: "maz-ui"
url: "https://maz-ui.com/components/maz-accordion"
---

# MazAccordion

> MazAccordion is a standalone component that allows you to create an accordion with a title and content.

- Package: `maz-ui`
- Import: `import MazAccordion from 'maz-ui/components/MazAccordion'`
- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
- Web: https://maz-ui.com/components/maz-accordion

> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)

## Basic usage

```vue
<script lang="ts" setup>
import MazAccordion from 'maz-ui/components/MazAccordion'
</script>

<template>
  <MazAccordion>
    <template #title-1>
      Title 1
    </template>
    <template #content-1>
      Content 1
    </template>

    <template #title-2>
      Title 2
    </template>
    <template #content-2>
      Content 2
    </template>

    <template #title-3>
      Title 3
    </template>
    <template #content-3>
      Content 3
    </template>

    <template #title-4>
      Title 4
    </template>
    <template #content-4>
      Content 4
    </template>
    <MazAccordion />
  </mazaccordion>
</template>
```

## MazAccordion API

`import MazAccordion from 'maz-ui/components/MazAccordion'`

### Props

- `id` (`string`)
- `model-value` (`number`, default: `0`, `v-model`)
- `content-class` (`ClassValue`)

### Events

- `@update:model-value` (payload: `any[`)

### Slots

- `#content` Bindings: `isOpen: boolean`.
- `#title-{step}`: One slot per `step`: `#title-<step>`.
- `#content-{step}`: One slot per `step`: `#content-<step>`. Bindings: `isOpen: boolean`.