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>

Features

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

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>

Installation

typo3 ui:add accordion

Read more about installing Components and Primitives.

Examples

Allow several open panels

Set multiple to keep several panels open at once. Try opening two items below.

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

Disable single items

Set disabled on an accordion.item to keep its panel closed. The second item below is disabled.

<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
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	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	-
`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	[]
`autoMount`	`boolean` Whether the client initializes the component on its own. Set it to false to mount it yourself with `mount()`	No	true
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-accordion-root`	<uid>
`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	-
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	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	-

Rendered data attributes

Attribute	Description
`data-accordion-item`	<uid>
`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
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-accordion-item-header`	<uid>
`data-state`	"open" \| "closed"
`data-focus`	Present when focused
`data-disabled`	Present when disabled
`data-orientation`	The orientation of the item

accordion.itemContent

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

Name	Description	Required	Default
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	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	-

Rendered data attributes

Attribute	Description
`data-accordion-item-content`	<uid>
`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
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	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	-

Rendered data attributes

Attribute	Description
`data-accordion-item-trigger`	<uid>
`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
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	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	-

Rendered data attributes

Attribute	Description
`data-accordion-item-indicator`	<uid>
`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.
`getItemHeaderProps`	`(props: ItemProps) => T["element"]`	Returns props for the item heading wrapper around the trigger. Render this as a heading element (e.g. `h3`) per the WAI-ARIA accordion pattern.

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.