Collapsible · Skeleton

Design System

tsx

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

export default function Default() {
	return (
		<Collapsible className="items-start 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/tailwind-utilities/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/icons/arrow-up-down';
	import { Collapsible } from '@skeletonlabs/skeleton-svelte';
</script>

<Collapsible class="items-start 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/tailwind-utilities/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.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.Trigger className="btn preset-filled">Show {open ? 'Less' : 'More'}</Collapsible.Trigger>
		</Collapsible>
	);
}

svelte

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

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

<Collapsible {open} onOpenChange={(details) => (open = details.open)}>
	<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.Trigger class="btn preset-filled">Show {open ? 'Less' : 'More'}</Collapsible.Trigger>
</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.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.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>
	);
}

svelte

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

<Collapsible>
	<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.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>

Disabled

Set the disabled state for the component.

tsx

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

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

svelte

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

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

Alignment

Control the position and alignment of the trigger and content using flexbox items-*.

tsx

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

export default function Alignment() {
	return (
		<Collapsible className="items-start">
			<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.Trigger className="btn preset-filled">Toggle</Collapsible.Trigger>
		</Collapsible>
	);
}

svelte

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

<Collapsible class="items-start">
	<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.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.Trigger className="btn preset-filled">Toggle</Collapsible.Trigger>
		</Collapsible>
	);
}

svelte

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

<Collapsible dir="rtl">
	<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.Trigger class="btn preset-filled">Toggle</Collapsible.Trigger>
</Collapsible>

Anatomy

Here’s an overview of how the Collapsible component is structured in code:

tsx

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

export default function Anatomy() {
	return (
		<Collapsible>
			<Collapsible.Trigger />
			<Collapsible.Content />
		</Collapsible>
	);
}

API Reference

Root

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

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

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

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