Collapsible

Installation

Barrel

import { Collapsible } from 'kumo-svelte';

Granular

import { Collapsible } from 'kumo-svelte/components/collapsible';

Usage

Collapsible uses a compound component pattern for full composition control.

With Default Styling

Use Collapsible.DefaultTrigger and Collapsible.DefaultPanel for the classic Kumo style:

<script lang="ts">  import {    Collapsible  } from 'kumo-svelte';  let open = $state(false);</script><Collapsible.Root bind:open>  <Collapsible.DefaultTrigger>Show details</Collapsible.DefaultTrigger>  <Collapsible.DefaultPanel>    Content with border-left accent styling.  </Collapsible.DefaultPanel></Collapsible.Root>

Custom Trigger

Use Collapsible.Trigger for full control over the trigger element:

<script lang="ts">  import { Collapsible } from 'kumo-svelte';  let open = $state(false);</script><Collapsible.Root bind:open>  <Collapsible.Trigger class="rounded-lg bg-kumo-base px-3 py-2 text-sm ring ring-kumo-line">    {open ? 'Hide' : 'Show'} details  </Collapsible.Trigger>  <Collapsible.Panel class="mt-2 rounded-lg bg-kumo-tint p-4">    Custom styled panel content.  </Collapsible.Panel></Collapsible.Root>

Examples

Basic

Multiple Items

Custom Trigger

Use Collapsible.Trigger for full control:

Accordion Pattern

Control which item is open to create an accordion where only one item can be expanded at a time:

Sub-components

Component	Description
Collapsible.Root	Manages open state. Pass open and onOpenChange for controlled mode.
Collapsible.Trigger	Button that toggles visibility.
Collapsible.Panel	Container for collapsible content.
Collapsible.DefaultTrigger	Pre-styled trigger with text label and animated caret icon.
Collapsible.DefaultPanel	Pre-styled panel with border-left accent and standard spacing.

API Reference

Convenience component that renders the default trigger and panel composition.

Prop	Type	Default	Description
trigger	`Snippet`	-	trigger prop.
children	`Snippet`	-	Child snippet rendered by the component.
class	`string`	-	Additional classes merged onto the root element.
open	`boolean`	-	Controlled open state.
defaultOpen	`boolean`	`false`	Initial uncontrolled open state.
title	`string`	-	Title content.
disabled	`boolean`	`false`	Disables the component.
onOpenChange	`(open: boolean) => void`	-	Called when open state changes.
autoScrollOnOpen	`boolean`	`false`	Scrolls newly expanded sidebar content into view after opening.
onOpenChangeComplete	`(open: boolean) => void`	-	Called after the open-state transition completes.

Collapsible.Root

Prop	Type	Default	Description
open	`boolean`	-	Controlled open state.
defaultOpen	`boolean`	`false`	Initial uncontrolled open state.
onOpenChange	`(open: boolean) => void`	-	Called when open state changes.
disabled	`boolean`	`false`	Disables the component.
onOpenChangeComplete	`(open: boolean) => void`	-	Called after the open-state transition completes.

Collapsible.Trigger

Prop	Type	Default	Description
disabled	`boolean`	`false`	Disables the component.
type	`'button' \| 'submit' \| 'reset'`	`"button"`	Element or semantic type.

Collapsible.Panel

Prop	Type	Default	Description
keepMounted	`boolean`	`false`	keepMounted prop.
forceMount	`boolean`	`false`	forceMount prop.
hiddenUntilFound	`boolean`	`true`	hiddenUntilFound prop.

Collapsible.DefaultTrigger

Prop	Type	Default	Description
disabled	`boolean`	`false`	Disables the component.

Collapsible.DefaultPanel

Accepts all Collapsible.Panel props in addition to the ones listed below.

Prop	Type	Default	Description
keepMounted	`boolean`	`false`	keepMounted prop.
forceMount	`boolean`	`false`	forceMount prop.
hiddenUntilFound	`boolean`	`true`	hiddenUntilFound prop.