> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/collapse.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt.

# Collapse

Expand or collapse a group of sections.

## Basic usage


Expand freely

About the project

About Leaf Garden.

Settings

Archived

Accordion · Compact

About the project

Settings

Archived

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/collapse/basic.tsx"
import type { CollapseItem } from '@ifhover/leaf-ui';

import { Collapse, Flex, Input, Space, Text } from '@ifhover/leaf-ui';

const items: CollapseItem[] = [
  { key: 'about', label: 'About the project', children: <p>About Leaf Garden.</p> },
  {
    key: 'settings',
    label: 'Settings',
    children: (
      <Flex direction="column" gap="sm" align="start">
        <Text>Project name</Text>
        <Input aria-label="Project name" placeholder="Type a draft, then collapse to keep it" />
      </Flex>
    ),
  },
  { key: 'archived', label: 'Archived', children: null, disabled: true },
];

export function CollapseBasic() {
  return (
    <Space direction="vertical" align="stretch">
      <Flex direction="column" gap="sm">
        <Text>Expand freely</Text>
        <Collapse items={items} defaultActiveKey="about" />
      </Flex>
      <Flex direction="column" gap="sm">
        <Text>Accordion · Compact</Text>
        <Collapse items={items} accordion size="sm" />
      </Flex>
    </Space>
  );
}
```

Expand code

## Collapse API

| Property                       | Type                                       | Default  | Description                        |
| ------------------------------ | ------------------------------------------ | -------- | ---------------------------------- |
| `items`                        | [`readonly CollapseItem[]`](#collapseitem) | Required | Panel items                        |
| `activeKey / defaultActiveKey` | `string \| readonly string[]`              | `[]`     | Controlled / initial expanded keys |
| `onChange`                     | `(keys: string[]) => void`                 | —        | Expanded keys change               |
| `accordion`                    | `boolean`                                  | `false`  | Expand one panel at a time         |
| `bordered`                     | `boolean`                                  | `true`   | Show border                        |
| `size`                         | `'sm' \| 'md' \| 'lg'`                     | `'md'`   | Header size                        |
| `destroyInactive`              | `boolean`                                  | `false`  | Destroy content when collapsed     |

### CollapseItem

| Property           | Type        | Default  | Description            |
| ------------------ | ----------- | -------- | ---------------------- |
| `key`              | `string`    | Required | Unique key             |
| `label / children` | `ReactNode` | Required | Header / panel content |
| `disabled`         | `boolean`   | `false`  | Disable this panel     |
| `extra`            | `ReactNode` | —        | Header actions         |

## Types

Import the exported types when defining props or building item lists.

```ts
import type { CollapseProps, CollapseItem } from '@ifhover/leaf-ui';
```

## Usage notes

Visited content is retained by default. Arrow keys, Home and End move between headers; Enter or Space toggles a panel. Actions in extra do not toggle the panel.