Collapsible

An interactive component which expands and collapses content.

	<script lang="ts">
  import * as Collapsible from "@/components//ui/collapsible";
  import * as Button from "@/components//ui/button";
  import { CaretUpDown } from "@/components//icons";
</script>
 
<Collapsible.Root class="w-[350px] space-y-2">
  <div
    class="flex items-center justify-between space-x-4 px-4"
  >
    <h4 class="text-sm font-semibold">
      @huntabyte starred 3 repositories
    </h4>
    <Collapsible.Trigger asChild let:builder>
      <Button.Root
        builders={[builder]}
        variant="ghost"
        size="sm"
        class="w-9 p-0"
      >
        <CaretUpDown class="h-4 w-4" />
        <span class="sr-only">Toggle</span>
      </Button.Root>
    </Collapsible.Trigger>
  </div>
  <div
    class="rounded-md border px-4 py-3 font-mono text-sm"
  >
    @huntabyte/bits
  </div>
  <Collapsible.Content class="space-y-2">
    <div
      class="rounded-md border px-4 py-3 font-mono text-sm"
    >
      @melt-ui/melt
    </div>
    <div
      class="rounded-md border px-4 py-3 font-mono text-sm"
    >
      @huntabyte/shadcn-svelte
    </div>
  </Collapsible.Content>
</Collapsible.Root>

	<script lang="ts">
  import * as Collapsible from "@/components//ui/collapsible";
  import * as Button from "@/components//ui/button";
  import { CaretUpDown } from "@/components//icons";
</script>
 
<Collapsible.Root class="w-[350px] space-y-2">
  <div
    class="flex items-center justify-between space-x-4 px-4"
  >
    <h4 class="text-sm font-semibold">
      @huntabyte starred 3 repositories
    </h4>
    <Collapsible.Trigger asChild let:builder>
      <Button.Root
        builders={[builder]}
        variant="ghost"
        size="sm"
        class="w-9 p-0"
      >
        <CaretUpDown class="h-4 w-4" />
        <span class="sr-only">Toggle</span>
      </Button.Root>
    </Collapsible.Trigger>
  </div>
  <div
    class="rounded-md border px-4 py-3 font-mono text-sm"
  >
    @huntabyte/bits
  </div>
  <Collapsible.Content class="space-y-2">
    <div
      class="rounded-md border px-4 py-3 font-mono text-sm"
    >
      @melt-ui/melt
    </div>
    <div
      class="rounded-md border px-4 py-3 font-mono text-sm"
    >
      @huntabyte/shadcn-svelte
    </div>
  </Collapsible.Content>
</Collapsible.Root>

@huntabyte starred 3 repositories

@huntabyte/bits

Structure

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

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

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

Component API

Collapsible.Root

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

Property	Type	Description
`disabled`	`boolean`	Whether or not the collapsible is disabled. This prevents the user from interacting with it. `Default: false`
`open`	`boolean`	The open state of the collapsible. The content will be visible when this is true, and hidden when it's false. `Default: false`
`onOpenChange`	`(open: boolean) => void`	A callback that is fired when the collapsible's open state changes. `Default: undefined`

Data Attribute	Value/Description
`data-disabled`	Present when the checkbox is disabled. `Value: ''`
`data-state`	The collapsible's open state. `Value: 'open' \| 'closed'`

Collapsible.Trigger

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

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`

Data Attribute	Value/Description
`data-disabled`	Present when the checkbox is disabled. `Value: ''`
`data-state`	The collapsible's open state. `Value: 'open' \| 'closed'`

Collapsible.Content

The content displayed when the collapsible is open.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`

Data Attribute	Value/Description
`data-disabled`	Present when the checkbox is disabled. `Value: ''`
`data-state`	The collapsible's open state. `Value: 'open' \| 'closed'`

🚧 UNDER CONSTRUCTION 🚧