> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

# Collapsible

An interactive component which expands/collapses a panel.

## Features

- Full keyboard navigation.

- Can be controlled or uncontrolled.

## Anatomy

Import the components and piece the parts together.

```jsx
import { Collapsible } from "@radix-solid/primitives";

export default () => <Collapsible.Root>

		<Collapsible.Trigger />

		<Collapsible.Content />

	</Collapsible.Root>;
```

## API Reference

### Root

Contains all the parts of a collapsible.

| Prop                                                                                                                                                                    | Type       | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean`  | `false` |
| `defaultOpen`The open state of the collapsible when it is initially rendered. Use when you do not need to control its open state.                                       | `boolean`  | —       |
| `open`The controlled open state of the collapsible. Must be used in conjunction with `onOpenChange`.                                                                    | `boolean`  | —       |
| `onOpenChange`Event handler called when the open state of the collapsible changes.                                                                                      | `function` | —       |
| `disabled`When `true`, prevents the user from interacting with the collapsible.                                                                                         | `boolean`  | —       |

| Data attribute    | Values                |
| ----------------- | --------------------- |
| `[data-state]`    | `"open" \| "closed"`  |
| `[data-disabled]` | Present when disabled |

### Trigger

The button that toggles the collapsible.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |

| Data attribute    | Values                |
| ----------------- | --------------------- |
| `[data-state]`    | `"open" \| "closed"`  |
| `[data-disabled]` | Present when disabled |

### Content

The component that contains the collapsible content.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |
| `forceMount`Used to force mounting when more control is needed. Useful when controlling animation with Solid-compatible animation libraries.                            | `boolean` | —       |

| Data attribute    | Values                |
| ----------------- | --------------------- |
| `[data-state]`    | `"open" \| "closed"`  |
| `[data-disabled]` | Present when disabled |

| CSS Variable                         | Description                                    |
| ------------------------------------ | ---------------------------------------------- |
| `--radix-collapsible-content-width`  | The width of the content when it opens/closes  |
| `--radix-collapsible-content-height` | The height of the content when it opens/closes |

## Examples

### Animating content size

Use the `--radix-collapsible-content-width` and/or `--radix-collapsible-content-height` CSS variables to animate the size of the content when it opens/closes. Here's a demo:

```jsx
// index.tsx

import { Collapsible } from "@radix-solid/primitives";

import "./styles.css";

export default () => <Collapsible.Root>

		<Collapsible.Trigger>…</Collapsible.Trigger>

		<Collapsible.Content class="CollapsibleContent">

			…

		</Collapsible.Content>

	</Collapsible.Root>;
```

```css
/* styles.css */

.CollapsibleContent {

	overflow: hidden;

}

.CollapsibleContent[data-state="open"] {

	animation: slideDown 300ms ease-out;

}

.CollapsibleContent[data-state="closed"] {

	animation: slideUp 300ms ease-out;

}



@keyframes slideDown {

	from {

		height: 0;

	}

	to {

		height: var(--radix-collapsible-content-height);

	}

}



@keyframes slideUp {

	from {

		height: var(--radix-collapsible-content-height);

	}

	to {

		height: 0;

	}

}
```

## Accessibility

Adheres to the [Disclosure WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure).

### Keyboard Interactions

| Key     | Description                   |
| ------- | ----------------------------- |
| `Space` | Opens/closes the collapsible. |
| `Enter` | Opens/closes the collapsible. |