# Collapsible

Source: https://payloadcms.com/docs/beta/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

Inside a Payload Admin Panel Custom Component:

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

You can also import the component directly:

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

## Basic usage

**Implementation**

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

**Styling**

Scope surface and border tokens to Collapsible to customize both its header and expanded content.

```css
@layer payload {
  .collapsible {
    --color-bg: #ffffff;
    --color-bg-secondary: #f4f1ff;
    --color-bg-secondary-hover: #e9e3ff;
    --color-border: #c8bdf5;
    --button-radius: 0.5rem;
  }
}
```

- `--color-bg`: Expanded content background.
- `--color-bg-secondary`: Header background.
- `--color-bg-secondary-hover`: Header background on hover.
- `--color-border`: Header and content border color.
- `--button-radius`: Outer corner radius.

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 state to customize invalid sections without changing the danger palette across the entire Admin Panel.

```css
@layer payload {
  .collapsible--style-error {
    --color-bg-danger-tertiary: #fde5e3;
    --color-bg-danger-tertiary-hover: #f8cfcc;
    --color-border-danger-strong: #b8322c;
  }
}
```

- `--color-bg-danger-tertiary`: Error header background.
- `--color-bg-danger-tertiary-hover`: Error header background on hover.
- `--color-border-danger-strong`: Error header and content border.

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) => Promise<void> \| 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._