120k
New

Collapsible

PreviousNext

An interactive component which expands/collapses a panel.

Installation

pnpm dlx shadcn@latest add @force-ui-svelte/collapsible

Usage

<script lang="ts">
  import * as Collapsible from "$lib/components/ui/collapsible/index.js";
</script>
<Collapsible.Root>
  <Collapsible.Trigger>Can I use this in my project?</Collapsible.Trigger>
  <Collapsible.Content>
    Yes. Free to use for personal and commercial projects. No attribution
    required.
  </Collapsible.Content>
</Collapsible.Root>

Composition

Use the following composition to build a Collapsible:

Collapsible.Root
├── Collapsible.Trigger
└── Collapsible.Content

Controlled State

Use bind:open to control the state.

<script lang="ts">
  import * as Collapsible from "$lib/components/ui/collapsible/index.js";
 
  let open = $state(false);
</script>
 
<Collapsible.Root bind:open>
  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
  <Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>

Examples

Basic

Settings Panel

Use a trigger button to reveal additional settings.

File Tree

Use nested collapsibles to build a file tree.

RTL

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference

See the Radix UI documentation for more information.