# Core/Collapse - Usage

A collapsible disclosure section with an expandable header and panel. Pass **`title`** for the header label, optional **`headerTrailingContentSlot`** for trailing actions (switches, buttons), and the panel body via **`children`**.

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
| `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
| `title` | `string` | Yes | `--` | Plain string title rendered in the disclosure heading. |
| `headerTrailingContentSlot` | `React.ReactNode` | No | `--` | Trailing header region for actions (switches, buttons, etc.). |
| `children` | `React.ReactNode` | Yes | `--` | Content of the disclosure panel. |

### `Collapse` root API

Pass **`title`** (plain string) for the header label, optional **`headerTrailingContentSlot`** for trailing actions
(switches, buttons), and the panel body via **`children`**.

The root forwards these `Disclosure` props from `react-aria-components`:
**`id`** (use when a parent **`DisclosureGroup`** controls expansion),
**`defaultExpanded`**, **`isExpanded`**, **`onExpandedChange`**, and **`isDisabled`**. Use **`FORCE__className`** on the
root as the style escape hatch.