# Accordion

**A set of collapsible panels with headings.**

**Reference:** [View Source](https://github.com/jramke/fluid-primitives/tree/main/Resources/Private/Primitives/Accordion) · [Zag.js Docs](https://zagjs.com/components/react/accordion)

**Accordion.html**

```html
<f:variable name="items" value="{
    0: { value: 'item-1', title: 'Product Information', content: 'Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.' },
    1: { value: 'item-2', title: 'Shipping Details', content: 'We offer worldwide shipping with various delivery options to suit your needs. Orders are processed within 24 hours and typically arrive within 5-10 business days.' },
    2: { value: 'item-3', title: 'Return Policy', content: 'We accept returns within 30 days of purchase. Items must be in original condition and packaging. Please contact our support team to initiate a return.' }
}" />

<ui:accordion.root class="w-full max-w-[400px]" defaultValue="{0: 'item-2'}">
    <f:for each="{items}" as="item">
        <ui:accordion.item value="{item.value}">
            <ui:accordion.itemTrigger>
                {item.title}
            </ui:accordion.itemTrigger>
            <ui:accordion.itemContent>
                {item.content}
            </ui:accordion.itemContent>
        </ui:accordion.item>
    </f:for>
</ui:accordion.root>
```

**Accordion.ts**

```ts
import { mountAll } from 'fluid-primitives';
import { Accordion } from 'fluid-primitives/accordion';

mountAll('accordion', ({ props }) => {
    const accordion = new Accordion(props);
    accordion.init();
    return accordion;
});

```

## Features

- Full keyboard navigation support
- Supports single or multiple expanded panels
- Supports horizontal and vertical orientations

## Installation

```bash
typo3 ui:add accordion
```

Or copy the files manually from GitHub (https://github.com/jramke/fluid-primitives.com/tree/main/packages/docs/Resources/Private/Registry/Accordion) into your project.

Read more about installing [Components and Primitives](/docs/core-concepts/primitives.md).

## Examples

### Multiple Expanded Panels

Allow multiple accordion items to be expanded at once by setting `multiple` to true.

**Accordion.html**

```html
<ui:accordion.root multiple="{true}" class="w-full max-w-[400px]">
    <ui:accordion.item value="item-1">
        <ui:accordion.itemTrigger>First item</ui:accordion.itemTrigger>
        <ui:accordion.itemContent>Content for the first item.</ui:accordion.itemContent>
    </ui:accordion.item>
    <ui:accordion.item value="item-2">
        <ui:accordion.itemTrigger>Second item</ui:accordion.itemTrigger>
        <ui:accordion.itemContent>Content for the second item.</ui:accordion.itemContent>
    </ui:accordion.item>
    <ui:accordion.item value="item-3">
        <ui:accordion.itemTrigger>Third item</ui:accordion.itemTrigger>
        <ui:accordion.itemContent>Content for the third item.</ui:accordion.itemContent>
    </ui:accordion.item>
</ui:accordion.root>
```

### Disabled Items

Disable specific accordion items to prevent interaction.

**Accordion.html**

```html
<ui:accordion.root class="w-full max-w-[400px]">
    <ui:accordion.item value="item-1">
        <ui:accordion.itemTrigger>Enabled item</ui:accordion.itemTrigger>
        <ui:accordion.itemContent>Content for the enabled item.</ui:accordion.itemContent>
    </ui:accordion.item>
    <ui:accordion.item value="item-2" disabled="{true}">
        <ui:accordion.itemTrigger>Disabled item</ui:accordion.itemTrigger>
        <ui:accordion.itemContent>This content cannot be accessed.</ui:accordion.itemContent>
    </ui:accordion.item>
</ui:accordion.root>
```

## API Reference

### accordion.root

Groups all parts of the accordion. Renders a `<div>` element.

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `multiple` | `boolean` | No | `false` | Whether multiple accordion items can be expanded at the same time. |
| `collapsible` | `boolean` | No | `true` | Whether an accordion item can be closed after it has been expanded. |
| `defaultValue` | `string[]` | No | `-` | The initial value of the expanded accordion items. Use when you don't need to control the value of the accordion. |
| `disabled` | `boolean` | No | `-` | Whether the accordion items are disabled. |
| `orientation` | `Enum\Orientation` | No | `Vertical` | The orientation of the accordion items. |
| `asChild` | `boolean` | No | `-` | If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props. |
| `rootId` | `string` | No | `-` | The root ID of the component, used for hydration and identification. |
| `ids` | `array` | No | `[]` | The IDs of of the component parts for composition. |
| `controlled` | `boolean` | No | `false` | If true, the component is meant to be initialized manually inside another component |
| `class` | `string` | No | `-` | The CSS class(es) to be applied to the component. |
| `attributes` | `array` | No | `[]` | Additional attributes that should be rendered on the component where ui:attributes is used. |

#### Rendered data attributes

| Attribute | Description |
| --- | --- |
| `data-scope` | accordion |
| `data-part` | root |
| `data-orientation` | The orientation of the accordion |

### accordion.item

Groups an accordion header with the corresponding content. Renders a `<div>` element.

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `value` | `string` | Yes | `-` | The value of the accordion item. |
| `disabled` | `boolean` | No | `-` | Whether the accordion item is disabled. |
| `asChild` | `boolean` | No | `-` | If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props. |
| `class` | `string` | No | `-` | The CSS class(es) to be applied to the component. |
| `attributes` | `array` | No | `[]` | Additional attributes that should be rendered on the component where ui:attributes is used. |

#### Rendered data attributes

| Attribute | Description |
| --- | --- |
| `data-scope` | accordion |
| `data-part` | item |
| `data-state` | "open" \| "closed" |
| `data-focus` | Present when focused |
| `data-disabled` | Present when disabled |
| `data-orientation` | The orientation of the item |

### accordion.itemHeader

A heading that labels the corresponding content. Renders an `<h3>` element.

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `level` | `integer` | No | `3` | The heading level to render for the accordion item header. |
| `class` | `string` | No | `-` | The CSS class(es) to be applied to the component. |
| `attributes` | `array` | No | `[]` | Additional attributes that should be rendered on the component where ui:attributes is used. |

### accordion.itemContent

The content of the accordion item. Renders a `<div>` element.

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `asChild` | `boolean` | No | `-` | If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props. |
| `class` | `string` | No | `-` | The CSS class(es) to be applied to the component. |
| `attributes` | `array` | No | `[]` | Additional attributes that should be rendered on the component where ui:attributes is used. |

#### Rendered data attributes

| Attribute | Description |
| --- | --- |
| `data-scope` | accordion |
| `data-part` | item-content |
| `data-state` | "open" \| "closed" |
| `data-disabled` | Present when disabled |
| `data-focus` | Present when focused |
| `data-orientation` | The orientation of the item |

### accordion.itemTrigger

A button that opens and closes the corresponding item. Renders a `<button>` element.

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `asChild` | `boolean` | No | `-` | If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props. |
| `class` | `string` | No | `-` | The CSS class(es) to be applied to the component. |
| `attributes` | `array` | No | `[]` | Additional attributes that should be rendered on the component where ui:attributes is used. |

#### Rendered data attributes

| Attribute | Description |
| --- | --- |
| `data-scope` | accordion |
| `data-part` | item-trigger |
| `data-controls` |  |
| `data-orientation` | The orientation of the item |
| `data-state` | "open" \| "closed" |
| `data-focus` | Present when focused |

### accordion.itemIndicator

An optional visual indicator that can be used to show the open/closed state of the item. Renders a `<div>` element.

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `asChild` | `boolean` | No | `-` | If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props. |
| `class` | `string` | No | `-` | The CSS class(es) to be applied to the component. |
| `attributes` | `array` | No | `[]` | Additional attributes that should be rendered on the component where ui:attributes is used. |

#### Rendered data attributes

| Attribute | Description |
| --- | --- |
| `data-scope` | accordion |
| `data-part` | item-indicator |
| `data-state` | "open" \| "closed" |
| `data-disabled` | Present when disabled |
| `data-focus` | Present when focused |
| `data-orientation` | The orientation of the item |

### Machine JavaScript API

| Name | Type | Description |
| --- | --- | --- |
| `focusedValue` | `string \| null` | The value of the focused accordion item. |
| `value` | `string[]` | The value of the accordion |
| `setValue` | `(value: string[]) => void` | Sets the value of the accordion |
| `getItemState` | `(props: ItemProps) => ItemState` | Returns the state of an accordion item. |

### Accessibility

| Key | Description |
| --- | --- |
| `Space`  | When focus is on an trigger of a collapsed item, the item is expanded |
| `Enter`  | When focus is on an trigger of a collapsed section, expands the section. |
| `Tab`  | Moves focus to the next focusable element |
| `Shift + Tab`  | Moves focus to the previous focusable element |
| `ArrowDown`  | Moves focus to the next trigger |
| `ArrowUp`  | Moves focus to the previous trigger. |
| `Home`  | When focus is on an trigger, moves focus to the first trigger. |
| `End`  | When focus is on an trigger, moves focus to the last trigger. |

## Anatomy

```html
<primitives:accordion.root>
    <primitives:accordion.item>
        <primitives:accordion.itemHeader>
            <primitives:accordion.itemTrigger>
                <primitives:accordion.itemIndicator />
            </primitives:accordion.itemTrigger>
        </primitives:accordion.itemHeader>
        <primitives:accordion.itemContent />
    </primitives:accordion.item>
</primitives:accordion.root>
```