Studio
2

Collapsible

Installation

pnpm dlx @mielui/svelte add collapsible

Usage

ComposeTrigger andContent insideRoot . Bindopen to control the panel from another part of your page. A disabled trigger cannot toggle it. The content transition respects reduced motion.

import * as Collapsible from '$lib/mielui/components/collapsible';

let open = $state();

<Collapsible.Root bind:open>
  <Collapsible.Trigger>Trigger</Collapsible.Trigger>
  <Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>

Examples

Default

API reference

Collapsible.Root

Controls collapsible content state.

Prop Type Default
open Bindable boolean | undefined false
disabled boolean | undefined false
children Snippet<[]> | undefined —

Collapsible.Content

Contains collapsible content.

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

Collapsible.Trigger

Toggles the content.

Prop Type Default
children Snippet<[]> | undefined —
class (string & (ClassValue | null)) | undefined —