---
title: Multi accordion
description: Multi Accordion displays multiple collapsible sections that can be expanded or collapsed independently or together.
category: Navigation
related: [Accordions, VerticalStepper, Container]
commonPatterns: [checklist-accordion, settings-accordion, step-accordion]
---

Source: https://clickhouse.design/click-ui/multiaccordion

# Multi accordion

Multi Accordion provides multiple collapsible sections that can be expanded independently. It supports single or multiple open items, completion indicators, and customizable styling. Perfect for checklists, settings panels, and step-by-step processes.

## Example

## Props

| Prop            | Type                                             | Default value | Description                                                                                        |
| --------------- | ------------------------------------------------ | ------------- | -------------------------------------------------------------------------------------------------- |
| type            | `"single" \| "multiple"`                         | `"single"`    | Whether only one item can be open at a time (single) or multiple items can be open (multiple)      |
| defaultValue    | `string \| Array<string>`                        | `undefined`   | Default open item(s) for uncontrolled accordions. String for single type, array for multiple type. |
| value           | `string \| Array<string>`                        | `undefined`   | Currently open item(s) for controlled accordions                                                   |
| onValueChange   | `(value: string \| Array&lt;string&gt;) => void` | `undefined`   | Callback function called when open items change. Receives the new value(s).                        |
| size            | `"none" \| "sm" \| "md" \| "lg"`                 | `"md"`        | Size variant of the accordion items                                                                |
| fillWidth       | `boolean`                                        | `true`        | Whether the accordion should take up the full width of its container                               |
| gap             | `GapOptions`                                     | `"md"`        | Spacing between accordion items                                                                    |
| showBorder      | `boolean`                                        | `true`        | Whether to display borders around accordion items                                                  |
| showCheck       | `boolean`                                        | `false`       | Whether to show checkmark icons for completed items                                                |
| markAsCompleted | `(value: string) => void \| Promise&lt;void&gt;` | `undefined`   | Callback function called when an item is marked as completed. Receives the item value.             |

```tsx
import { MultiAccordion, Text } from '@clickhouse/click-ui'

<MultiAccordion type="multiple" defaultValue={['item1']}>
<MultiAccordion.Item value="item1" title="First item">
  <Text>Content here</Text>
</MultiAccordion.Item>
</MultiAccordion>
```

### MultiAccordion.Item Props

| Prop        | Type                  | Default value | Description                                                             |
| ----------- | --------------------- | ------------- | ----------------------------------------------------------------------- |
| value       | `string`              | `''`          | Unique value identifier for this accordion item. Required.              |
| title       | `ReactNode`           | `''`          | Title text or content displayed in the accordion item header. Required. |
| color       | `"default" \| "link"` | `"default"`   | Color variant of the accordion item title text                          |
| icon        | `IconName`            | `''`          | Icon name to display in the accordion item header                       |
| iconSize    | `IconSize`            | `''`          | Size of the icon displayed in the accordion item header                 |
| gap         | `SpacerSizeType`      | `''`          | Spacing between the accordion item header and content                   |
| isCompleted | `boolean`             | `false`       | Whether this item is marked as completed                                |
| disabled    | `boolean`             | `false`       | Whether this accordion item is disabled and cannot be interacted with   |

```tsx
<MultiAccordion.Item 
value="item1" 
title="Item title"
icon="star"
isCompleted={false}
>
<Text>Content here</Text>
</MultiAccordion.Item>
```

## Quick start

```tsx
import { MultiAccordion, Text } from '@clickhouse/click-ui'

function MyMultiAccordion() {
return (
  <MultiAccordion type="multiple" defaultValue={['item1']}>
    <MultiAccordion.Item value="item1" title="First item">
      <Text>Content for the first item.</Text>
    </MultiAccordion.Item>
    <MultiAccordion.Item value="item2" title="Second item">
      <Text>Content for the second item.</Text>
    </MultiAccordion.Item>
  </MultiAccordion>
)
}
```

## Related components

- **Accordions**: For single accordion items instead of multiple.
- **VerticalStepper**: For step-by-step processes with progress indicators.
- **Container**: For organizing accordions within layouts.

## Common use cases

### Checklist accordion

```tsx
import { MultiAccordion, Text } from '@clickhouse/click-ui'

function ChecklistAccordion() {
return (
  <MultiAccordion type='multiple' showCheck defaultValue={['item1']}>
    <MultiAccordion.Item value='item1' title='Completed Item' isCompleted>
      <Text>This item is marked as completed.</Text>
    </MultiAccordion.Item>
    <MultiAccordion.Item value='item2' title='Incomplete Item'>
      <Text>This item is not yet completed.</Text>
    </MultiAccordion.Item>
  </MultiAccordion>
)
}
```

### Settings accordion

```tsx
import { MultiAccordion, Text } from '@clickhouse/click-ui'

function SettingsAccordion() {
return (
  <MultiAccordion type='single' defaultValue='settings1'>
    <MultiAccordion.Item value='settings1' title='Account Settings'>
      <Text>Manage your account preferences.</Text>
    </MultiAccordion.Item>
    <MultiAccordion.Item value='settings2' title='Privacy Settings'>
      <Text>Control your privacy preferences.</Text>
    </MultiAccordion.Item>
  </MultiAccordion>
)
}
```

### With icons

```tsx
import { MultiAccordion, Text } from '@clickhouse/click-ui'

function MultiAccordionWithIcons() {
return (
  <MultiAccordion type='multiple' defaultValue={['item1']}>
    <MultiAccordion.Item value='item1' title='Item with Icon' icon='star'>
      <Text>This item has an icon.</Text>
    </MultiAccordion.Item>
    <MultiAccordion.Item value='item2' title='Another Item' icon='check'>
      <Text>This item also has an icon.</Text>
    </MultiAccordion.Item>
  </MultiAccordion>
)
}
```