> ## Documentation Index
> [HTML page](https://blode.md/docs/components/expandable)
> [Documentation index](https://blode.md/docs/llms.txt)
> Use the index to discover all available pages before exploring further.

# Expandable

Hide nested properties, optional fields, and advanced options behind Expandable sections so reference docs stay readable without losing detail.

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.