Collapsible

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

	<script lang="ts">
  import { Collapsible } from "$lib";
  import { CaretUpDown } from "phosphor-svelte";
  import { slide } from "svelte/transition";
</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 text-foreground shadow-btn transition-all hover:bg-muted active:scale-98"
    >
      <CaretUpDown class="sq-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]"
    transition={slide}
  >
    <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>

	<script lang="ts">
  import { Collapsible } from "$lib";
  import { CaretUpDown } from "phosphor-svelte";
  import { slide } from "svelte/transition";
</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 text-foreground shadow-btn transition-all hover:bg-muted active:scale-98"
    >
      <CaretUpDown class="sq-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]"
    transition={slide}
  >
    <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>

@huntabyte starred 3 repositories

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`	`function`	A callback that is fired when the collapsible's open state changes. `Default: —— undefined`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

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
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLButtonElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

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
`transition`	`function`	A Svelte transition function to use when transitioning the content in and out. `Default: —— undefined`
`transitionConfig`	`TransitionConfig`	The configuration to apply to the transition. `Default: —— undefined`
`inTransition`	`function`	A Svelte transition function to use when transitioning the content in and out. `Default: —— undefined`
`inTransitionConfig`	`TransitionConfig`	The configuration to apply to the transition. `Default: —— undefined`
`outTransition`	`function`	A Svelte transition function to use when transitioning the content in and out. `Default: —— undefined`
`outTransitionConfig`	`TransitionConfig`	The configuration to apply to the transition. `Default: —— undefined`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

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.

🚧 UNDER CONSTRUCTION 🚧