Studio
2

Accordion

Installation

pnpm dlx @mielui/svelte add accordion

Usage

Arrow keys move between enabled headers; Home and End jump to the first and last header. Each item generates its own trigger and content IDs. Setting collapsible to false keeps the active single item open.

Single mode uses a string value and reports undefined when cleared. With type="multiple", bind a string array; clearing all selections reports an empty array. The value and onValueChange types follow the selected mode.

import * as Accordion from '$lib/mielui/components/accordion';

<Accordion.Root type="single">
  <Accordion.Item value="a">
    <Accordion.Trigger>Trigger</Accordion.Trigger>
    <Accordion.Content>Content</Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

Examples

Single mode

Multiple mode

API reference

Accordion.Root

Groups collapsible sections.

Prop Type Default
class string | undefined —
children Snippet<[]> | undefined —
collapsible boolean | undefined true
type "single" | undefined | "multiple" —
value Bindable string | undefined | string[] | undefined —
onValueChange ((value: string | undefined) => void) | undefined | ((value: string[]) => void) | undefined —

Accordion.Content

Contains an item's collapsible content.

Prop Type Default
children Snippet<[]> | undefined —
class string | undefined —

Accordion.Item

Defines a collapsible section.

Prop Type Default
value Required string —
disabled boolean | undefined false
children Snippet<[]> | undefined —
class string | undefined —

Accordion.Trigger

Toggles its item.

Prop Type Default
children Snippet<[]> | undefined —
class string | undefined —