# 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](https://www.w3.org/WAI/ARIA/apg/patterns/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`<br> The controlled open state of the collapsible. |
| defaultOpen | `boolean`<br> The default open state when initially rendered. Useful when you do not need to control the open state. |
| onOpenChange | `(open: boolean) => void`<br> Event handler called when the open state of the collapsible changes. |
| disabled | `boolean`<br> Whether the collapsible is disabled. |
| forceMount | `boolean`<br> 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[←Checkbox](https://kobalte.dev/docs/core/components/checkbox)Next[Color Area→](https://kobalte.dev/docs/core/components/color-area)