Accordion

A set of collapsible panels with headings.

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.

<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>

import { mount } from 'fluid-primitives';
import { Accordion } from 'fluid-primitives/accordion';

mount('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

typo3 ui:add accordion

Read more about installing Components and Primitives.

Examples

Multiple Expanded Panels

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

<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.

<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

The following tables cover the available props of the Fluid Primitives. For a full list of available client side props and methods, see the Zag.js Machine API.

accordion.root

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

Name	Description	Required	Default
`multiple`	`boolean` Whether multiple accordion items can be expanded at the same time.	No	false
`collapsible`	`boolean` Whether an accordion item can be closed after it has been expanded.	No	true
`defaultValue`	`string[]` The initial value of the expanded accordion items. Use when you don't need to control the value of the accordion.	No	-
`disabled`	`boolean` Whether the accordion items are disabled.	No	-
`orientation`	`Enum\Orientation` The orientation of the accordion items.	No	Vertical

accordion.item

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

Name	Description	Required	Default
`value`	`string` The value of the accordion item.	Yes	-
`disabled`	`boolean` Whether the accordion item is disabled.	No	-

accordion.itemHeader

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

Name	Description	Required	Default
`level`	`integer` The heading level to render for the accordion item header.	No	3

accordion.itemContent

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

accordion.itemTrigger

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

accordion.itemIndicator

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

Anatomy

<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>

Accordion

Product Information

Shipping Details

Return Policy

Features

Installation

Examples

Multiple Expanded Panels

First item

Second item

Third item