Collapsible

Installation

pnpm dlx @mielui/svelte add collapsible

npx @mielui/svelte add collapsible

yarn dlx @mielui/svelte add collapsible

bunx @mielui/svelte add collapsible

Usage

Compose Trigger and Content inside Root. Bind open to control the panel from elsewhere on the page, and set disabled on Root to prevent toggling. The content transition respects reduced motion.

Trigger is the shared disclosure row used by Accordion, Reasoning, and Tool. It sizes to its content; add w-full justify-between for a full-width row. For a chevron, put a 14px ArrowDown01Icon after the label and rotate it 180 degrees while open, as the first example does.

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

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

<Collapsible.Root bind:open>
    <Collapsible.Trigger>Delivery details</Collapsible.Trigger>
    <Collapsible.Content>Delivery takes 3 to 5 business days.</Collapsible.Content>
</Collapsible.Root>

Parts

Trigger can hold any content, so a chevron that turns when the section opens goes right beside its label.

Root renders no element of its own; it holds the open state. Trigger and Content render their children and take class, and Trigger passes button attributes such as id.