# Accordion

Vertically stacked disclosure panels. Single or multiple expanded items.

- Package: `@mielui/svelte`
- Component version: `1.1.1`
- Depends on Mielui components: _internal/utils, _internal/disclosure
- Shared utilities: hugeicons-icon, utils.cn, utils.createContext

## Install

~~~~sh
pnpm dlx @mielui/svelte add accordion
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Content

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. |
| class | string \| undefined | - | No | No | Classes added to the element. |



### Item

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| value | string | - | Yes | No | Identifies the item. Root's `value` holds the open item or items. |
| disabled | boolean \| undefined | false | No | No | Prevents interaction and dims the control. |
| children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. |
| class | string \| undefined | - | No | No | Classes added to the element. |



### Root

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| class | string \| undefined | - | No | No | Classes added to the element. |
| children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. |
| collapsible | boolean \| undefined | true | No | No | In single mode, lets the open item be closed so none is open. |
| type | "single" \| "multiple" \| undefined | - | No | No | `single` keeps one value. `multiple` allows several and makes `value` an array. |
| value | string \| string[] \| undefined | - | No | Yes | The open item, or an array of open items in multiple mode. Bindable. |
| onValueChange | ((value: string \| undefined) => void) \| ((value: string[]) => void) \| undefined | - | No | No | Called when the open item or items change. |



### Trigger

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. |
| class | string \| undefined | - | No | No | Classes added to the element. |



### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import Root from './accordion.svelte';
import Content from './accordion-content.svelte';
import Item from './accordion-item.svelte';
import Trigger from './accordion-trigger.svelte';

export type AccordionProps = DefaultProps & {
    /** In single mode, lets the open item be closed so none is open. */
    collapsible?: boolean;
} & (
        | {
              /** `single` keeps one value. `multiple` allows several and makes `value` an array. */
              type?: 'single';
              /** The open item, or an array of open items in multiple mode. Bindable. */
              value?: string;
              /** Called when the open item or items change. */
              onValueChange?: (value: string | undefined) => void;
          }
        | {
              /** `single` keeps one value. `multiple` allows several and makes `value` an array. */
              type: 'multiple';
              /** The open item, or an array of open items in multiple mode. Bindable. */
              value?: string[];
              /** Called when the open item or items change. */
              onValueChange?: (value: string[]) => void;
          }
    );

export type AccordionItemProps = {
    /** Identifies the item. Root's `value` holds the open item or items. */
    value: string;
    /** Prevents interaction and dims the control. */
    disabled?: boolean;
    /** Content rendered inside. */
    children?: Snippet;
} & DefaultProps;

export type AccordionTriggerProps = {
    /** Content rendered inside. */
    children?: Snippet;
} & DefaultProps;

export type AccordionContentProps = {
    /** Content rendered inside. */
    children?: Snippet;
} & DefaultProps;

export { Content, Item, Root, Trigger };
~~~~

## Examples

### Multiple Mode

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

<div class="w-full max-w-md">
    <Accordion.Root type="multiple">
        <Accordion.Item value="shipping">
            <Accordion.Trigger>Shipping</Accordion.Trigger>
            <Accordion.Content>
                Orders ship within two working days. Open returns too to compare both policies.
            </Accordion.Content>
        </Accordion.Item>
        <Accordion.Item value="returns">
            <Accordion.Trigger>Returns</Accordion.Trigger>
            <Accordion.Content>
                Return anything within 30 days. Shipping stays open while you read this.
            </Accordion.Content>
        </Accordion.Item>
    </Accordion.Root>
</div>
~~~~

### Single Mode

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

<div class="w-full max-w-md">
    <Accordion.Root type="single">
        <Accordion.Item value="billing">
            <Accordion.Trigger>When am I billed?</Accordion.Trigger>
            <Accordion.Content>
                On the first of each month. Only one answer is open at a time.
            </Accordion.Content>
        </Accordion.Item>
        <Accordion.Item value="cancel">
            <Accordion.Trigger>Can I cancel anytime?</Accordion.Trigger>
            <Accordion.Content>
                Yes, from Settings. Opening this answer closes the one above.
            </Accordion.Content>
        </Accordion.Item>
    </Accordion.Root>
</div>
~~~~

For the rendered reference, visit [/docs/components/accordion](/docs/components/accordion).