# Collapsible

Source: https://payloadcms.com/docs/ui-components/collapsible

The `Collapsible` component groups content beneath a header that can be expanded or collapsed. It manages its own state by default and can also be controlled by a parent component.

## Import

```tsx
import { Collapsible } from '@payloadcms/ui'
```

## Basic usage

**Implementation**

```tsx
<Collapsible header="Collapsible header">
  Collapsible content
</Collapsible>
```

**Styling**

Customize the Collapsible frame, header, and content surfaces independently with its structural classes.

```css
.collapsible--style-default {
  border-color: #c8c0ff;
}

.collapsible--style-default > .collapsible__toggle-wrap {
  background: #f3f1ff;
}

.collapsible__content {
  background: #ffffff;
}
```

- `background`: Header or content surface.
- `border-color`: Collapsed section outline.

Use a concise header that describes the hidden content. The entire header is used as the toggle target unless `disableHeaderToggle` is enabled.

## Error state

**Implementation**

```tsx
<Collapsible collapsibleStyle="error" header="Collapsible header">
  Correct the invalid fields in this section.
</Collapsible>
```

**Styling**

Target the error modifier when a customer’s validation palette differs from Payload’s defaults.

```css
.collapsible--style-error {
  border-color: #dc2626;
}

.collapsible--style-error > .collapsible__toggle-wrap {
  background: #fee2e2;
}

.collapsible--style-error .row-label {
  color: #7f1d1d;
}
```

- `background`: Error header surface.
- `border-color`: Error outline.
- `color`: Error header label.

Use the `error` style when the section contains invalid fields that require attention.

## Common props

These are the props most commonly used with this component. See its exported types in `@payloadcms/ui` for the complete list.

| Prop                     | Type                           | Default     | Description                                            |
| ------------------------ | ------------------------------ | ----------- | ------------------------------------------------------ |
| `children` \*            | `ReactNode`                    | —           | Content displayed inside the collapsible section.      |
| `header`                 | `ReactNode`                    | —           | Content displayed in the section header.               |
| `actions`                | `ReactNode`                    | —           | Displays controls on the trailing edge of the header.  |
| `collapsibleStyle`       | `'default' \| 'error'`         | `'default'` | Sets the visual state.                                 |
| `initCollapsed`          | `boolean`                      | `false`     | Sets the initial uncontrolled state.                   |
| `isCollapsed`            | `boolean`                      | —           | Controls the collapsed state from a parent component.  |
| `onToggle`               | `(collapsed: boolean) => void` | —           | Runs when the section is toggled.                      |
| `disableHeaderToggle`    | `boolean`                      | `false`     | Prevents the header from toggling the section.         |
| `disableToggleIndicator` | `boolean`                      | `false`     | Hides the trailing chevron.                            |
| `AfterCollapsible`       | `ReactNode`                    | —           | Renders content after the collapsible content wrapper. |

_\* An asterisk denotes that a prop is required._