PettyUI/.firecrawl/kobalte.dev-docs-core-components-collapsible.md

Collapsible

An interactive component which expands/collapses a content.

Import

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

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

Features

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

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.

Copytsx
<Collapsible>
	<Collapsible.Trigger />
	<Collapsible.Content />
</Collapsible>

Copytsx
<Collapsible>
	<Collapsible.Trigger />
	<Collapsible.Content />
</Collapsible>

Example

What is Kobalte?Chevron

index.tsxstyle.css

Copytsx
import { Collapsible } from "@kobalte/core/collapsible";
import { ChevronDownIcon } from "some-icon-library";
import "./style.css";

function App() {
  return (
    <Collapsible class="collapsible">
      <Collapsible.Trigger class="collapsible__trigger">
        <span>What is Kobalte?</span>
        <ChevronDownIcon class="collapsible__trigger-icon" />
      </Collapsible.Trigger>
      <Collapsible.Content class="collapsible__content">
        <p class="collapsible__content-text">
          Kobalte is a UI toolkit for building accessible web apps and design systems with SolidJS.
          It provides a set of low-level UI components and primitives which can be the foundation
          for your design system implementation.
        </p>
      </Collapsible.Content>
    </Collapsible>
  );
}

Copytsx
import { Collapsible } from "@kobalte/core/collapsible";
import { ChevronDownIcon } from "some-icon-library";
import "./style.css";

function App() {
  return (
    <Collapsible class="collapsible">
      <Collapsible.Trigger class="collapsible__trigger">
        <span>What is Kobalte?</span>
        <ChevronDownIcon class="collapsible__trigger-icon" />
      </Collapsible.Trigger>
      <Collapsible.Content class="collapsible__content">
        <p class="collapsible__content-text">
          Kobalte is a UI toolkit for building accessible web apps and design systems with SolidJS.
          It provides a set of low-level UI components and primitives which can be the foundation
          for your design system implementation.
        </p>
      </Collapsible.Content>
    </Collapsible>
  );
}

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.

Copycss
/* 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;
	}
}

Copycss
/* 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).

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	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.

Previous←CheckboxNextColor Area→