Kobalte.v0.13.1

Collapsible

An interactive component which expands/collapses a content.

Import

ts
import { Collapsible } from "@kobalte/core/collapsible";
// or
import { Root, Trigger, ... } from "@kobalte/core/collapsible";
// or (deprecated)
import { Collapsible } from "@kobalte/core";
ts
import { Collapsible } from "@kobalte/core/collapsible";
// or
import { Root, Trigger, ... } from "@kobalte/core/collapsible";
// or (deprecated)
import { Collapsible } from "@kobalte/core";

Features

Anatomy

The collapsible consists of:

  • Collapsible: 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>
<Collapsible.Trigger />
<Collapsible.Content />
</Collapsible>
tsx
<Collapsible>
<Collapsible.Trigger />
<Collapsible.Content />
</Collapsible>

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

Collapsible is equivalent to the Root import from @kobalte/core/collapsible (and deprecated Collapsible.Root).

PropDescription
openboolean
The controlled open state of the collapsible.
defaultOpenboolean
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.
disabledboolean
Whether the collapsible is disabled.
forceMountboolean
Used to force mounting the collapsible content when more control is needed. Useful when controlling animation with SolidJS animation libraries.
Data attributeDescription
data-expandedPresent when the collapsible is expanded.
data-closedPresent when the collapsible is collapsed.
data-disabledPresent when the collapsible is disabled.

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

Rendered elements

ComponentDefault rendered element
Collapsiblediv
Collapsible.Triggerbutton
Collapsible.Contentdiv

Accessibility

Keyboard Interactions

KeyDescription
SpaceWhen focus is on the trigger, opens/closes the collapsible.
EnterWhen focus is on the trigger, opens/closes the collapsible.