Accordion

A renderless interactive component for expand/collapse content sections, with accessibility and keyboard navigation.

View source

Show code

Title 1

Title 2

Title 3

Title 4

Features

Renderless. Customize the structure and apply the style you want.
Can open single or multiple accordion item.
Controllable from the outside.
Keyboard navigation.

Structure

Minimal structure to use the component without any styling.

<!-- Accordion root wrapper -->
<AccordionRoot>
    {#snippet children(root)}
        <div {...root.rootAttrs}>
            
            <!-- Accordion items wrappers -->
            {#each items as value, i (value)}
                <AccordionItem {value}>
                    {#snippet children(item)}
                        <!-- Item -->
                        <div {...item.itemAttrs}>
                            <!-- Heading -->
                            <div {...item.headingAttrs}>
                                <span>Title {value}</span>
                                <!-- Trigger -->
                                <button {...item.triggerAttrs}>toggle</button>
                            </div>

                            <!-- Content -->
                            {#if item.expanded}
                                <div {...item.contentAttrs}>Content {value}</div>
                            {/if}
                        </div>
                    {/snippet}
                </AccordionItem>
            {/each}

        </div>
    {/snippet}
</AccordionRoot>

API Reference

AccordionRoot

Property	Type	Default	Description
`children` Snippet	`Snippet`		Accordion Root content to render
`disabled`	`boolean`	`false`	Disable all Accordion Item
`loop`	`boolean`	`false`	Loop when navigating with the keyboard
`multiple`	`boolean`	`false`	Can toggle single or multiple Accordion Item
`onValueChange`	`AccordionSelectionValueChange`		Callback when value change
`orientation`	`union`	`"vertical"`	Accordion orientation
`value` $bindable	`AccordionSelectionValue`		Current accordion selection. Single value when multiple is false and Array is multiple is true,

AccordionItem

Property	Type	Default	Description
`children` Snippet	`Snippet`		Accordion Item content to render
`disabled`	`boolean`	`false`	Disable Accordion Item
`headingLevel`	`union`	`"2"`	Heading level for aria-level attribut
`value` required	`AccordionValue`		Unique Accordion Item identifier

Type Definitions

export type AccordionSelectionValueChange = (newValue: AccordionSelectionValue) => void;

export type AccordionRootSnippetProps = {
    readonly rootAttrs: Record<string, unknown>;
};

export type AccordionItemSnippetProps = {
    readonly expanded: boolean;
    readonly disabled: boolean;
    readonly itemAttrs: Record<string, unknown>;
    readonly headingAttrs: Record<string, unknown>;
    readonly triggerAttrs: Record<string, unknown>;
    readonly contentAttrs: Record<string, unknown>;
};

Examples

Full featured

Example using other components from the library.

In controlled mode and with multiple/loop enabled.

Show code

Title 1

Title 2

Title 3

Title 4

Color

Badge