> ## Documentation Index
> Fetch the complete documentation index at: https://docs.blode.md/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Expandable

Collapsible sections for nested property details.

Use the `Expandable` component to hide supplementary details behind a toggle. This is useful for documenting nested objects, optional configuration, or advanced options without overwhelming the reader.

## Basic usage

```mdx
<Expandable title="child properties">
  - **name** (`string`) — Display name of the item. - **value** (`number`) —
  Numeric value associated with the item. - **metadata** (`object`) — Additional
  key-value pairs.
</Expandable>
```

### child properties

- **name** (`string`) — Display name of the item. - **value** (`number`) —
  Numeric value associated with the item. - **metadata** (`object`) — Additional
  key-value pairs.

## Default open

Set `defaultOpen` to reveal the content on page load:

```mdx
<Expandable title="response fields" defaultOpen>
  - **id** (`string`) — Unique identifier. - **status** (`"active" |
  "archived"`) — Current status. - **createdAt** (`string`) — ISO 8601
  timestamp.
</Expandable>
```

### response fields

- **id** (`string`) — Unique identifier. - **status** (`"active" |
  "archived"`) — Current status. - **createdAt** (`string`) — ISO 8601
  timestamp.

## Nested expandables

You can nest expandables to document deeply nested structures:

```mdx
<Expandable title="project properties">
  - **name** (`string`) — Project name.
  - **config** (`object`) — Project configuration.

  <Expandable title="config properties">
    - **appearance** (`object`) — Light and dark mode settings.
    - **navigation** (`array`) — Sidebar navigation items.
  </Expandable>
</Expandable>
```

### project properties

- **name** (`string`) — Project name.
  - **config** (`object`) — Project configuration.

  <Expandable title="config properties">
    - **appearance** (`object`) — Light and dark mode settings.
    - **navigation** (`array`) — Sidebar navigation items.
</Expandable>

## Props

- `title` (type: string, required: false, default: "properties"): Label for the toggle button.
- `defaultOpen` (type: boolean, required: false, default: false): Whether the section starts expanded.
- `children` (type: ReactNode, required: true): Content revealed when expanded.