Accordion

A vertical stack of collapsible sections. Single mode opens one at a time; multiple allows any combination.

Only invited members can open projects. Owners can invite people and change their roles.

Installation

pnpm dlx @mielui/svelte add accordion

Usage

Arrow keys move between enabled headers; Home and End jump to the first and last header.

Single mode binds a string value and reports undefined when the open item closes. Set collapsible={false} to keep one item open at all times. With type="multiple", bind a string array; closing every item reports an empty array. The value and onValueChange types follow the mode.

Each trigger is the shared disclosure row used by Collapsible, Reasoning, and Tool: the small control height, a ghost hover fill, a rounded focus ring, and a trailing 14px chevron that turns upward while open.

<script lang="ts">
    import * as Accordion from '@mielui/svelte/components/accordion';

    let open = $state<string | undefined>('billing');
</script>

<Accordion.Root bind:value={open}>
    <Accordion.Item value="billing">
        <Accordion.Trigger>Billing</Accordion.Trigger>
        <Accordion.Content>Change your plan from Billing.</Accordion.Content>
    </Accordion.Item>
</Accordion.Root>

Examples

Single mode

Multiple mode

Parts

disabled on an Item stops that section from being opened while the others stay usable.

Every part renders its children and takes class.

API reference

Accordion.Root

Groups collapsible sections.

class

string
Classes added to the element.
children

Snippet<[]>
Content rendered inside.
collapsible

boolean
In single mode, lets the open item be closed so none is open.

Default true
type

"single" | "multiple"
single keeps one value. multiple allows several and makes value an array.
value Bindable

string | string[]
The open item, or an array of open items in multiple mode. Bindable.
onValueChange

((value: string | undefined) => void) | ((value: string[]) => void)
Called when the open item or items change.

Accordion.Content

Contains an item's collapsible content.

children

Snippet<[]>
Content rendered inside.
class

string
Classes added to the element.

Accordion.Item

Defines a collapsible section.

value Required

string
Identifies the item. Root's value holds the open item or items.
disabled

boolean
Prevents interaction and dims the control.

Default false
children

Snippet<[]>
Content rendered inside.
class

string
Classes added to the element.

Accordion.Trigger

Toggles its item.

children

Snippet<[]>
Content rendered inside.
class

string
Classes added to the element.