Collapsible

An interactive component which expands/collapses a content.

Import

ts
import { Collapsible } from "@kobalte/core";

ts
import { Collapsible } from "@kobalte/core";

Features

Follow the WAI ARIA Disclosure design pattern.
Can be controlled or uncontrolled.

Anatomy

The collapsible consists of:

Collapsible.Root: The root container for a collapsible.
Collapsible.Trigger: The button that expands/collapses the collapsible content.
Collapsible.Content: Contains the content to be rendered when the collapsible is expanded.

tsx
<Collapsible.Root>
	<Collapsible.Trigger />
	<Collapsible.Content />
</Collapsible.Root>

tsx
<Collapsible.Root>
	<Collapsible.Trigger />
	<Collapsible.Content />
</Collapsible.Root>

Example

Usage

Animating content size

We expose the CSS custom properties --kb-collapsible-content-width and --kb-collapsible-content-height which you can use to animate the size of the content when it opens/closes.

css
/* style.css */
.collapsible__content {
	overflow: hidden;
	animation: slideUp 300ms ease-out;
}
.collapsible__content[data-expanded] {
	animation: slideDown 300ms ease-out;
}
@keyframes slideDown {
	from {
		height: 0;
	}
	to {
		height: var(--kb-collapsible-content-height);
	}
}
@keyframes slideUp {
	from {
		height: var(--kb-collapsible-content-height);
	}
	to {
		height: 0;
	}
}

css
/* style.css */
.collapsible__content {
	overflow: hidden;
	animation: slideUp 300ms ease-out;
}
.collapsible__content[data-expanded] {
	animation: slideDown 300ms ease-out;
}
@keyframes slideDown {
	from {
		height: 0;
	}
	to {
		height: var(--kb-collapsible-content-height);
	}
}
@keyframes slideUp {
	from {
		height: var(--kb-collapsible-content-height);
	}
	to {
		height: 0;
	}
}

API Reference

Collapsible.Root

Prop	Description
open	`boolean` The controlled open state of the collapsible.
defaultOpen	`boolean` The default open state when initially rendered. Useful when you do not need to control the open state.
onOpenChange	`(open: boolean) => void` Event handler called when the open state of the collapsible changes.
disabled	`boolean` Whether the collapsible is disabled.
forceMount	`boolean` Used to force mounting the collapsible content when more control is needed. Useful when controlling animation with SolidJS animation libraries.

Data attribute	Description
data-expanded	Present when the collapsible is expanded.
data-closed	Present when the collapsible is collapsed.
data-disabled	Present when the collapsible is disabled.

Collapsible.Trigger and Collapsible.Content share the same data-attributes.

Rendered elements

Component	Default rendered element
`Collapsible.Root`	`div`
`Collapsible.Trigger`	`button`
`Collapsible.Content`	`div`

Accessibility

Keyboard Interactions

Key	Description
`Space`	When focus is on the trigger, opens/closes the collapsible.
`Enter`	When focus is on the trigger, opens/closes the collapsible.