# Core/Collapse - Design

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`**.

## Usage

Use Collapse to structure readable content, separate regions, or group related information. Pair it with shared spacing, typography, and surface rules. Do not stretch it into an action pattern that already has a dedicated component.

## Best Practices

* Do use Collapse to support hierarchy, grouping, and readable scanning.
* Don't turn Collapse into an action container when a dedicated interactive pattern exists.

## Accessibility

### Keyboard interaction

| Key                | Function                                                                                                                                                                                         |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `Tab`, `Shift-Tab` | When contents are collapsed, focus moves to the next or previous collapse header. When contents are expanded, focus moves to the next or previous focusable element within the expanded content. |
| `Enter`, `Space`   | When focus is on the accordion header, toggles the expanded/collapsed state.                                                                                                                     |

* When receiving focus through the keyboard, the focus outline appears around the title of the collapse header.

## Related components

* [Card](?path=/docs/core-card--design)
* [Divider](?path=/docs/core-divider--design)