Collapsible · Skeleton

Design System

tsx

import { Collapsible } from '@skeletonlabs/skeleton-react';
import { ArrowUpDownIcon } from 'lucide-react';

export default function Default() {
	return (
		<Collapsible className="card preset-filled-surface-100-900 p-4 w-56 mx-auto">
			<div className="w-full flex justify-between items-center">
				<p className="font-bold">Design System</p>
				<Collapsible.Trigger className="btn-icon hover:preset-tonal">
					<ArrowUpDownIcon className="size-4" />
				</Collapsible.Trigger>
			</div>
			<Collapsible.Content className="flex flex-col gap-2">
				<nav className="contents">
					<a className="anchor" href="/docs/design/themes">
						Themes
					</a>
					<a className="anchor" href="/docs/design/colors">
						Colors
					</a>
					<a className="anchor" href="/docs/design/presets">
						Presets
					</a>
					<a className="anchor" href="/docs/design/typography">
						Typography
					</a>
					<a className="anchor" href="/docs/design/spacing">
						Spacing
					</a>
					<a className="anchor" href="/docs/design/iconography">
						Iconography
					</a>
				</nav>
			</Collapsible.Content>
		</Collapsible>
	);
}

Design System

svelte

<script lang="ts">
	import { ArrowUpDownIcon } from '@lucide/svelte';
	import { Collapsible } from '@skeletonlabs/skeleton-svelte';
</script>

<Collapsible class="card preset-filled-surface-100-900 p-4 w-56 mx-auto">
	<div class="w-full flex justify-between items-center">
		<p class="font-bold">Design System</p>
		<Collapsible.Trigger class="btn-icon hover:preset-tonal">
			<ArrowUpDownIcon class="size-4" />
		</Collapsible.Trigger>
	</div>
	<Collapsible.Content class="flex flex-col gap-2">
		<nav class="contents">
			<a class="anchor" href="/docs/design/themes">Themes</a>
			<a class="anchor" href="/docs/design/colors">Colors</a>
			<a class="anchor" href="/docs/design/presets">Presets</a>
			<a class="anchor" href="/docs/design/typography">Typography</a>
			<a class="anchor" href="/docs/design/spacing">Spacing</a>
			<a class="anchor" href="/docs/design/iconography">Iconography</a>
		</nav>
	</Collapsible.Content>
</Collapsible>

Controlled

Control the active state of the component.

tsx

import { Collapsible } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';

export default function Controlled() {
	const [open, setOpen] = useState(false);

	return (
		<Collapsible open={open} onOpenChange={(details) => setOpen(details.open)}>
			<Collapsible.Trigger className="btn preset-filled">{open ? 'Close' : 'Open'}</Collapsible.Trigger>
			<Collapsible.Content>
				The world dies over and over again, but the skeleton always gets up and walks. Every heart has its own skeletons. The bones of the
				skeleton which support the body can become the bars of the cage which imprison the spirit.
			</Collapsible.Content>
		</Collapsible>
	);
}

svelte

<script lang="ts">
	import { Collapsible } from '@skeletonlabs/skeleton-svelte';

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

<Collapsible {open} onOpenChange={(details) => (open = details.open)}>
	<Collapsible.Trigger class="btn preset-filled">{open ? 'Close' : 'Open'}</Collapsible.Trigger>
	<Collapsible.Content>
		The world dies over and over again, but the skeleton always gets up and walks. Every heart has its own skeletons. The bones of the
		skeleton which support the body can become the bars of the cage which imprison the spirit.
	</Collapsible.Content>
</Collapsible>

Indicator

Add a visual indicator to the toggle button.

tsx

import { Collapsible } from '@skeletonlabs/skeleton-react';
import { MinusIcon, PlusIcon } from 'lucide-react';

export default function Default() {
	return (
		<Collapsible>
			<Collapsible.Trigger className="btn preset-filled">
				<span>Toggle</span>
				<Collapsible.Indicator className="group">
					<MinusIcon className="size-4 group-data-[state=open]:block hidden" />
					<PlusIcon className="size-4 group-data-[state=open]:hidden block" />
				</Collapsible.Indicator>
			</Collapsible.Trigger>
			<Collapsible.Content>
				The world dies over and over again, but the skeleton always gets up and walks. Every heart has its own skeletons. The bones of the
				skeleton which support the body can become the bars of the cage which imprison the spirit.
			</Collapsible.Content>
		</Collapsible>
	);
}

svelte

<script lang="ts">
	import { MinusIcon, PlusIcon } from '@lucide/svelte';
	import { Collapsible } from '@skeletonlabs/skeleton-svelte';
</script>

<Collapsible>
	<Collapsible.Trigger class="btn preset-filled">
		<span>Toggle</span>
		<Collapsible.Indicator class="group">
			<MinusIcon class="size-4 group-data-[state=open]:block hidden" />
			<PlusIcon class="size-4 group-data-[state=open]:hidden block" />
		</Collapsible.Indicator>
	</Collapsible.Trigger>
	<Collapsible.Content>
		The world dies over and over again, but the skeleton always gets up and walks. Every heart has its own skeletons. The bones of the
		skeleton which support the body can become the bars of the cage which imprison the spirit.
	</Collapsible.Content>
</Collapsible>

Disabled

Set the disabled state for the component.

tsx

import { Collapsible } from '@skeletonlabs/skeleton-react';

export default function Disabled() {
	return (
		<Collapsible disabled>
			<Collapsible.Trigger className="btn preset-filled">Toggle</Collapsible.Trigger>
			<Collapsible.Content>Hidden!</Collapsible.Content>
		</Collapsible>
	);
}

svelte

<script lang="ts">
	import { Collapsible } from '@skeletonlabs/skeleton-svelte';
</script>

<Collapsible disabled>
	<Collapsible.Trigger class="btn preset-filled">Toggle</Collapsible.Trigger>
	<Collapsible.Content>Hidden!</Collapsible.Content>
</Collapsible>

Alignment

Control the position and alignment of the trigger and content.

tsx

import { Collapsible } from '@skeletonlabs/skeleton-react';

export default function Alignment() {
	return (
		<Collapsible className="flex flex-col items-center">
			<Collapsible.Trigger className="btn preset-filled">Toggle</Collapsible.Trigger>
			<Collapsible.Content>
				The world dies over and over again, but the skeleton always gets up and walks. Every heart has its own skeletons. The bones of the
				skeleton which support the body can become the bars of the cage which imprison the spirit.
			</Collapsible.Content>
		</Collapsible>
	);
}

svelte

<script lang="ts">
	import { Collapsible } from '@skeletonlabs/skeleton-svelte';
</script>

<Collapsible class="flex flex-col items-center">
	<Collapsible.Trigger class="btn preset-filled">Toggle</Collapsible.Trigger>
	<Collapsible.Content>
		The world dies over and over again, but the skeleton always gets up and walks. Every heart has its own skeletons. The bones of the
		skeleton which support the body can become the bars of the cage which imprison the spirit.
	</Collapsible.Content>
</Collapsible>

Direction

Set the text direction (ltr or rtl) using the dir prop.

tsx

import { Collapsible } from '@skeletonlabs/skeleton-react';

export default function Dir() {
	return (
		<Collapsible dir="rtl">
			<Collapsible.Trigger className="btn preset-filled">Toggle</Collapsible.Trigger>
			<Collapsible.Content>
				The world dies over and over again, but the skeleton always gets up and walks. Every heart has its own skeletons. The bones of the
				skeleton which support the body can become the bars of the cage which imprison the spirit.
			</Collapsible.Content>
		</Collapsible>
	);
}

svelte

<script lang="ts">
	import { Collapsible } from '@skeletonlabs/skeleton-svelte';
</script>

<Collapsible dir="rtl">
	<Collapsible.Trigger class="btn preset-filled">Toggle</Collapsible.Trigger>
	<Collapsible.Content>
		The world dies over and over again, but the skeleton always gets up and walks. Every heart has its own skeletons. The bones of the
		skeleton which support the body can become the bars of the cage which imprison the spirit.
	</Collapsible.Content>
</Collapsible>

API Reference

Root

txt

w-full data-[state=open]:space-y-2

Prop	Default	Type
`ids`	—	Partial<{ root: string; content: string; trigger: string; }> \| undefined The ids of the elements in the collapsible. Useful for composition.
`open`	—	boolean \| undefined The controlled open state of the collapsible.
`defaultOpen`	—	boolean \| undefined The initial open state of the collapsible when rendered. Use when you don't need to control the open state of the collapsible.
`onOpenChange`	—	((details: OpenChangeDetails) => void) \| undefined The callback invoked when the open state changes.
`onExitComplete`	—	VoidFunction \| undefined The callback invoked when the exit animation completes.
`disabled`	—	boolean \| undefined Whether the collapsible is disabled.
`collapsedHeight`	—	string \| number \| undefined The height of the content when collapsed.
`collapsedWidth`	—	string \| number \| undefined The width of the content when collapsed.
`getRootNode`	—	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Provider

Prop	Default	Type
`value`	—	CollapsibleApi<PropTypes>
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	(collapsible: CollapsibleApi<PropTypes>) => ReactNode

Trigger

txt

data-disabled:opacity-50 data-disabled:pointer-events-none

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"button">) => Element) \| undefined Render the element yourself

Indicator

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Content

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Root

txt

w-full data-[state=open]:space-y-2

Prop	Default	Type
`ids`	—	Partial<{ root: string; content: string; trigger: string; }> \| undefined The ids of the elements in the collapsible. Useful for composition.
`open`	—	boolean \| undefined The controlled open state of the collapsible.
`defaultOpen`	—	boolean \| undefined The initial open state of the collapsible when rendered. Use when you don't need to control the open state of the collapsible.
`onOpenChange`	—	((details: OpenChangeDetails) => void) \| undefined The callback invoked when the open state changes.
`onExitComplete`	—	VoidFunction \| undefined The callback invoked when the exit animation completes.
`disabled`	—	boolean \| undefined Whether the collapsible is disabled.
`collapsedHeight`	—	string \| number \| undefined The height of the content when collapsed.
`collapsedWidth`	—	string \| number \| undefined The width of the content when collapsed.
`getRootNode`	—	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Provider

Prop	Default	Type
`value`	—	() => CollapsibleApi<PropTypes>
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	Snippet<[() => CollapsibleApi<PropTypes>]>

Trigger

txt

data-disabled:opacity-50 data-disabled:pointer-events-none

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"button">]> \| undefined Render the element yourself

Indicator

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Content

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself