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>

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 🚧