Collapsible

An interactive component which expands and collapses content.

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

Root

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

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

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

Trigger

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

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

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

Content

The content displayed when the collapsible is open.

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

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

🚧 UNDER CONSTRUCTION 🚧