# Collapsible

Single-item disclosure panel with bindable open state.

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

## Install

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

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



### Root

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| open | boolean \| undefined | false | No | Yes | Whether it is open. Bind it to control the state from outside. |
| disabled | boolean \| undefined | false | No | No | Prevents opening and closing. |
| children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. |



### Trigger

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

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import type { HTMLButtonAttributes } from 'svelte/elements';
import Root from './collapsible.svelte';
import Content from './collapsible-content.svelte';
import Trigger from './collapsible-trigger.svelte';

export type CollapsibleProps = {
    /** Whether it is open. Bind it to control the state from outside. */
    open?: boolean;
    /** Prevents opening and closing. */
    disabled?: boolean;
    /** Content rendered inside. */
    children?: Snippet;
};

export type CollapsibleTriggerProps = {
    /** Content rendered inside. */
    children?: Snippet;
} & DefaultProps &
    Omit<HTMLButtonAttributes, 'onclick' | 'children'>;

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

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

## Examples

### Default

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

    let open = $state(false);
</script>

<div class="w-full max-w-md">
    <Collapsible.Root bind:open>
        <Collapsible.Trigger>
            {open ? 'Hide delivery details' : 'Show delivery details'}
        </Collapsible.Trigger>
        <Collapsible.Content>
            Delivery takes 3 to 5 business days. A tracking link appears here after the order ships.
        </Collapsible.Content>
    </Collapsible.Root>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { ArrowDown01Icon as ChevronDown } from '@hugeicons/core-free-icons';
    import * as Collapsible from '@mielui/svelte/components/collapsible';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let open = $state(true);
</script>

<div class="w-full max-w-96">
    <Collapsible.Root bind:open>
        <Collapsible.Trigger class="w-full justify-between">
            <span>Weekly sync, June 18</span>
            <HugeiconsIcon
                icon={ChevronDown}
                size={14}
                aria-hidden="true"
                class={[
                    'shrink-0 text-foreground-muted transition-transform [transition-duration:var(--motion-duration-flick)] ease-[var(--ease-spring-flick)] motion-reduce:transition-none',
                    open && 'rotate-180'
                ]}
            />
        </Collapsible.Trigger>
        <Collapsible.Content class="flex flex-col gap-3 pt-1 pb-2">
            <p class="m-0">
                The export flow is ready for testing. Maya owns the migration guide, and Sam will
                review keyboard navigation before Friday.
            </p>
            <ul class="m-0 list-none space-y-2 p-0">
                <li class="flex gap-2">
                    <span class="text-foreground-muted">•</span>
                    <span>Ship the studio redesign by end of quarter</span>
                </li>
                <li class="flex gap-2">
                    <span class="text-foreground-muted">•</span>
                    <span>Draft v2 migration guide for customers</span>
                </li>
                <li class="flex gap-2">
                    <span class="text-foreground-muted">•</span>
                    <span>Review pricing experiment results with finance</span>
                </li>
            </ul>
        </Collapsible.Content>
    </Collapsible.Root>
</div>
~~~~

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