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>

Controlled Usage

Sometimes, you want to either control or be aware of the open state of the collapsible from outside of the component. To do so, you can bind to the open prop.

	<script lang="ts">
	import { Collapsible } from "bits-ui";
	let collapsibleOpen = false;
</script>
 
<button on:click={() => (collapsibleOpen = true)}>Open</button>
<Collapsible.Root bind:open={collapsibleOpen}>
	<Collapsible.Trigger />
	<Collapsible.Content />
</Collapsible.Root>

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
child
Snippet

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

Default: undefined
children
Snippet

The children content to render.

Default: undefined
ref
HTMLDivElement

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

Default: undefined
Data Attribute Value Description
data-disabled
——

Present when the checkbox is disabled.

data-state
enum

The collapsible's open state.

data-collapsible-root
——

Present on the root element.

Collapsible.Trigger

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

Property Type Description
child
Snippet

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

Default: undefined
children
Snippet

The children content to render.

Default: undefined
ref
HTMLButtonElement

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

Default: undefined
Data Attribute Value Description
data-disabled
——

Present when the checkbox is disabled.

data-state
enum

The collapsible's open state.

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 animnation library for the content.

Default: false
child
Snippet

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

Default: undefined
children
Snippet

The children content to render.

Default: undefined
ref
HTMLDivElement

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

Default: undefined
Data Attribute Value Description
data-disabled
——

Present when the checkbox is disabled.

data-state
enum

The collapsible's open state.

data-collapsible-content
——

Present on the content element.