Collapsible

An interactive component that expands and collapses content sections.

Anatomy

<script>
  import {
    Collapsible,
    CollapsibleTrigger,
    CollapsibleContent,
    CollapsibleIndicator,
  } from "@saas-ui/svelte/components/collapsible";
</script>

<Collapsible.Root>
  <Collapsible.Trigger>
    Toggle Content
    <Collapsible.Indicator />
  </Collapsible.Trigger>
  <Collapsible.Content>
    Collapsible content goes here...
  </Collapsible.Content>
</Collapsible.Root>

Examples

Basic Accessibility

Basic collapsible with default styling.

<Collapsible>
	<Collapsible.Trigger>Toggle Collapsible</Collapsible.Trigger>
	<Collapsible.Content>
		<Card.Root class="p-2 px-4 text-sm">
			Lorem Ipsum is simply dummy text of the printing and typesetting
			industry. Lorem Ipsum has been the industry's standard dummy
			text ever since the 1500s, when an unknown printer took a galley
			of type and scrambled it to make a type specimen book.
		</Card.Root>
	</Collapsible.Content>
</Collapsible>

Lazy Mounted Accessibility

Collapsible with lazyMount and unmountOnExit enabled to unmount content when collapsed.

<Collapsible unmountOnExit>
	<Collapsible.Trigger>Toggle Collapse (Unmount on exit)</Collapsible.Trigger>
	<Collapsible.Content>
		<Card.Root class="p-2 px-4 text-sm">
			If you inspect the DOM, you'll notice that the content is
			unmounted when collapsed. This is useful for performance reasons
			when you have a lot of collapsible content.
		</Card.Root>
	</Collapsible.Content>
</Collapsible>

Props

Prop	Type	Default	Description
`defaultOpen`	`boolean`	-	Whether the collapsible is open by default.
`disabled`	`boolean`	-	Whether the collapsible is disabled.
`lazyMount`	`boolean`	`false`	Whether to enable lazy mounting of content.
`unmountOnExit`	`boolean`	`false`	Whether to unmount the content when collapsed.
`onPrefetch`	`any`	-	Callback invoked when hovering over the trigger. Similar to Astro's link prefetching, this allows preloading data before expanding.
`class`	`text`	-	Additional CSS classes to apply.