Collapsible · Skeleton

tsx

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

export default function Default() {
	return (
		<Collapsible>
			<Collapsible.Trigger className="btn preset-filled">Toggle</Collapsible.Trigger>
			<Collapsible.Content>
				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit pariatur error soluta voluptate, accusantium modi repudiandae omnis
				eligendi, suscipit repellat impedit architecto neque sequi mollitia autem dicta quae ipsum et?
			</Collapsible.Content>
		</Collapsible>
	);
}

svelte

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

<Collapsible>
	<Collapsible.Trigger class="btn preset-filled">Toggle</Collapsible.Trigger>
	<Collapsible.Content>
		Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam assumenda veritatis modi repellendus enim accusantium inventore
		architecto maxime voluptates quibusdam velit perferendis mollitia, quas, aliquam sapiente adipisci illo nostrum vitae?
	</Collapsible.Content>
</Collapsible>

Controlled

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>
				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit pariatur error soluta voluptate, accusantium modi repudiandae omnis
				eligendi, suscipit repellat impedit architecto neque sequi mollitia autem dicta quae ipsum et?
			</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>
		Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam assumenda veritatis modi repellendus enim accusantium inventore
		architecto maxime voluptates quibusdam velit perferendis mollitia, quas, aliquam sapiente adipisci illo nostrum vitae?
	</Collapsible.Content>
</Collapsible>

Indicator

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>
				Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam assumenda veritatis modi repellendus enim accusantium inventore
				architecto maxime voluptates quibusdam velit perferendis mollitia, quas, aliquam sapiente adipisci illo nostrum vitae?
			</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>
		Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam assumenda veritatis modi repellendus enim accusantium inventore
		architecto maxime voluptates quibusdam velit perferendis mollitia, quas, aliquam sapiente adipisci illo nostrum vitae?
	</Collapsible.Content>
</Collapsible>

Disabled

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>
				Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas maxime in praesentium reiciendis eveniet modi mollitia? Odio
				accusantium veritatis accusamus quia placeat sapiente reiciendis? Consectetur, quis! Voluptatem omnis accusantium blanditiis.
			</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>
		Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus ea reiciendis veritatis quae mollitia, nulla minima cupiditate
		quisquam soluta sunt? Necessitatibus non dolorum voluptas ea maiores itaque laborum officiis quia.
	</Collapsible.Content>
</Collapsible>

Alignment

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>
				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit pariatur error soluta voluptate, accusantium modi repudiandae omnis
				eligendi, suscipit repellat impedit architecto neque sequi mollitia autem dicta quae ipsum et?
			</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>
		Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam assumenda veritatis modi repellendus enim accusantium inventore
		architecto maxime voluptates quibusdam velit perferendis mollitia, quas, aliquam sapiente adipisci illo nostrum vitae?
	</Collapsible.Content>
</Collapsible>

Direction

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>
				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit pariatur error soluta voluptate, accusantium modi repudiandae omnis
				eligendi, suscipit repellat impedit architecto neque sequi mollitia autem dicta quae ipsum et?
			</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>
		Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam assumenda veritatis modi repellendus enim accusantium inventore
		architecto maxime voluptates quibusdam velit perferendis mollitia, quas, aliquam sapiente adipisci illo nostrum vitae?
	</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