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

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
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`rootId`	`string` The root ID of the component, used for hydration and identification.	No	-
`ids`	`array` The IDs of of the component parts for composition.	No	[]
`controlled`	`boolean` If true, the component is meant to be initialized manually inside another component	No	false
`class`	`string` The CSS class(es) to be applied to the component.	No	-
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]

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

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

accordion.itemContent

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

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

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

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

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

<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

Disabled Items

Enabled item

Disabled item

API Reference

accordion.root

Rendered data attributes

accordion.item

Rendered data attributes

accordion.itemHeader

accordion.itemContent

Rendered data attributes

accordion.itemTrigger

Rendered data attributes

accordion.itemIndicator

Rendered data attributes

Machine JavaScript API

Accessibility

Anatomy

On this page