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
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.