Collapsible

A component that toggles visibility of content sections.

<script lang="ts">
import { ChevronDown } from "@lucide/svelte";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "coss-svelte";
</script>

<Collapsible>
	<CollapsibleTrigger class="inline-flex items-center gap-2 font-medium text-sm">
		Show recovery keys
		<ChevronDown class="size-4" />
	</CollapsibleTrigger>
	<CollapsibleContent>
		<ul class="flex flex-col gap-1 py-2 text-muted-foreground text-sm">
			<li class="rounded-sm bg-muted px-2 py-1 font-mono">4829-1735-6621</li>
			<li class="rounded-sm bg-muted px-2 py-1 font-mono">9182-6407-5532</li>
			<li class="rounded-sm bg-muted px-2 py-1 font-mono">3051-7924-9018</li>
		</ul>
	</CollapsibleContent>
</Collapsible>

Installation

Install the component package, shared coss-svelte theme, and Bits UI peer.

npm install coss-svelte @coss-svelte/theme bits-ui

Usage

Import the Svelte component exports directly from the package.

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "coss-svelte";

Anatomy

Collapsible
CollapsibleContent
CollapsibleTrigger

API Reference

Collapsible

A component that toggles visibility of content sections.

Prop	Type	Default	Description
`bind:open`	`boolean`	`false`	Open state for the popup or disclosure. Bind with `bind:open`.
`title`	`string`	`""`	Title text rendered by the component's built-in fallback layout.

children : Snippet<[]>bind:ref : HTMLElement | null

Inherits from Bits UI Collapsible.Root.

CollapsibleContent

Wraps the primary content for the parent component.

Prop	Type	Description
`forceMount`	`boolean`	Keeps content mounted while closed so transitions can complete.

children : Snippet<[]>bind:ref : HTMLElement | null

Inherits from Bits UI Collapsible.Content.

CollapsibleTrigger

Renders the control that opens, closes, or selects related content.

children : Snippet<[]>child : Snippet<[{ props: Record<string, unknown> }]>bind:ref : HTMLElement | null

Inherits from Bits UI Collapsible.Trigger.

Implementation Details

Status: Stable
Foundation: bits
Category: Layout & Navigation
Particles: 1