Collapsible

Single-item disclosure on bits-ui Collapsible. The content uses the same height-based expand/collapse as Accordion, honors reduced-motion, and leaves the DOM in place while closed.

API Reference Component Source

Usage

@kchn starred 3 repositories

bloom-nx

collapsible.svelte

<script lang="ts">
	import * as Collapsible from '$lib/components/ui/collapsible';
</script>

<Collapsible.Root>
	<Collapsible.Trigger>Toggle</Collapsible.Trigger>
	<Collapsible.Content>Hidden content</Collapsible.Content>
</Collapsible.Root>

Controlled

Bind open to drive the disclosure externally.

open = false

collapsible.svelte

<script lang="ts">
	import { Collapsible as CollapsiblePrimitive } from 'bits-ui';

	let {
		ref = $bindable(null),
		open = $bindable(false),
		...restProps
	}: CollapsiblePrimitive.RootProps = $props();
</script>

<CollapsiblePrimitive.Root bind:ref bind:open data-slot="collapsible" {...restProps} />

Collapsible.Root props

Inherits bits-ui Collapsible.Root props.

Type	Default	Description
`boolean (bindable)`	`false`	Controlled open state. Two-way bindable.
`boolean`	`false`	Disables the trigger.
`(open: boolean) => void`	—	Fires whenever the open state changes.
`string`	—	Merged onto the root via tailwind-merge.

Collapsible.Trigger / Content props

Prop	Type	Default	Description
	`Snippet<[{ props }]>`	—	Render-prop escape hatch for composing the trigger with any element (Button, anchor, etc.).
	`boolean`	`false`	Keeps Content in the DOM while closed. Useful for animating both directions or for SEO-visible content.