Report an issue

Collapsible

Conceals or reveals content sections, enhancing space utilization and organization.

@huntabyte starred 3 repositories

	<script lang="ts">
  import { Collapsible } from "bits-ui";
  import CaretUpDown from "phosphor-svelte/lib/CaretUpDown";
</script>
 
<Collapsible.Root class="w-[327px] space-y-3">
  <div class="flex items-center justify-between space-x-10">
    <h4 class="text-[15px] font-medium">@huntabyte starred 3 repositories</h4>
    <Collapsible.Trigger
      class="inline-flex h-10 w-10 items-center justify-center rounded-9px border border-border-input bg-background-alt text-foreground shadow-btn transition-all hover:bg-muted active:scale-98"
    >
      <CaretUpDown class="size-4 " weight="bold" />
      <span class="sr-only">Toggle</span>
    </Collapsible.Trigger>
  </div>
 
  <Collapsible.Content
    class="space-y-2 font-mono text-[15px] tracking-[0.01em]"
  >
    <div
      class="inline-flex h-12 w-full items-center rounded-9px bg-muted px-[18px] py-3"
    >
      @huntabyte/bits-ui
    </div>
    <div
      class="inline-flex h-12 w-full items-center rounded-9px bg-muted px-[18px] py-3"
    >
      @huntabyte/shadcn-svelte
    </div>
    <div
      class="inline-flex h-12 w-full items-center rounded-9px bg-muted px-[18px] py-3"
    >
      @melt-ui/melt-ui
    </div>
  </Collapsible.Content>
</Collapsible.Root>

Structure

	<script lang="ts">
	import { Collapsible } from "bits-ui";
</script>
 
<Collapsible.Root>
	<Collapsible.Trigger />
	<Collapsible.Content />
</Collapsible.Root>

Reusable Components

It's recommended to use the Collapsible primitives to create your own custom collapsible component that can be used throughout your application.

MyCollapsible.svelte
	<script lang="ts">
	import { Collapsible, type WithoutChild } from "bits-ui";
 
	type Props = WithoutChild<Collapsible.RootProps> & {
		buttonText: string;
	};
 
	let {
		open = $bindable(false),
		ref = $bindable(null),
		buttonText,
		children,
		...restProps
	}: Props = $props();
</script>
 
<Collapsible.Root bind:open bind:ref {...restProps}>
	<Collapsible.Trigger>{buttonText}</Collapsible.Trigger>
	<Collapsible.Content>
		{@render children?.()}
	</Collapsible.Content>
</Collapsible.Root>

You can then use the MyCollapsible component in your application like so:

+page.svelte
	<script lang="ts">
	import MyCollapsible from "$lib/components/MyCollapsible.svelte";
</script>
 
<MyCollapsible buttonText="Open Collapsible">Here is my collapsible content.</MyCollapsible>

Managing Open State

The open prop is used to determine whether the collapsible is open or closed. Bits UI provides flexible options for controlling and synchronizing the Collapsible's open state.

Two-Way Binding

Use the bind:open directive for effortless two-way synchronization between your local state and the Collapsible's internal state.

	<script lang="ts">
	import { Collapsible } from "bits-ui";
	let myOpen = $state(false);
</script>
 
<button onclick={() => (myOpen = true)}> Open </button>
 
<Collapsible.Root bind:open={myOpen}>
	<!-- ... -->
</Collapsible.Root>

This setup enables toggling the Collapsible via the custom button and ensures the local myOpen state updates when the Collapsible changes through any internal means (e.g., clicking on the trigger).

Change Handler

You can also use the onOpenChange prop to update local state when the Collapsible's open state changes. This is useful when you don't want two-way binding for one reason or another, or you want to perform additional logic when the Collapsible changes.

	<script lang="ts">
	import { Collapsible } from "bits-ui";
	let myOpen = $state(false);
</script>
 
<Collapsible.Root
	open={myOpen}
	onOpenChange={(open) => {
		myOpen = open;
		// additional logic here.
	}}
>
	<!-- ... -->
</Collapsible.Root>

Svelte Transitions

You can use the forceMount prop on the Collapsible.Content component to forcefully mount the content regardless of whether the collapsible is opened or not. This is useful when you want more control over the transitions when the collapsible opens and closes using something like Svelte Transitions.

The open snippet prop can be used for conditional rendering of the content based on whether the collapsible is open.

	<Collapsible.Content forceMount>
	{#snippet child({ props, open })}
		{#if open}
			<div {...props} transition:slide={{ duration: 1000 }}>
				This is the collapsible content that will transition in and out.
			</div>
		{/if}
	{/snippet}
</Collapsible.Content>

With the amount of boilerplate needed to handle the transitions, it's recommended to componentize your custom implementation of the collapsible content and use that throughout your application. See the Transitions documentation for more information on using transitions with Bits UI components.

API Reference

Collapsible.Root

The root collapsible container which manages the state of the collapsible.

Property Type Description
open bindable prop
boolean

The open state of the collapsible. The content will be visible when this is true, and hidden when it's false.

Default: false
disabled
boolean

Whether or not the collapsible is disabled. This prevents the user from interacting with it.

Default: false
onOpenChange
function

A callback that is fired when the collapsible's open state changes.

Default: undefined
ref bindable prop
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See delegation docs for more information.

Default: undefined
Data Attribute Value Description
data-state
enum

The collapsible's open state.

data-disabled
''

Present when the collapsible is disabled.

data-collapsible-root
''

Present on the root element.

Collapsible.Trigger

The button responsible for toggling the collapsible's open state.

Property Type Description
ref bindable prop
HTMLButtonElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See delegation docs for more information.

Default: undefined
Data Attribute Value Description
data-state
enum

The collapsible's open state.

data-disabled
''

Present when the collapsible or this trigger is disabled.

data-collapsible-trigger
''

Present on the trigger element.

Collapsible.Content

The content displayed when the collapsible is open.

Property Type Description
forceMount
boolean

Whether or not to forcefully mount the content. This is useful if you want to use Svelte transitions or another animation library for the content.

Default: false
ref bindable prop
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See delegation docs for more information.

Default: undefined
Data Attribute Value Description
data-state
enum

The collapsible's open state.

data-disabled
''

Present when the collapsible is disabled.

data-collapsible-content
''

Present on the content element.

CSS Variable Description
--bits-collapsible-content-height

The height of the collapsible content element.

--bits-collapsible-content-width

The width of the collapsible content element.