Skip to content
Blode.md

AI agents: fetch the documentation index at llms.txt. Markdown versions are available by appending .md to any page URL, including this page's markdown.

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

<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>

Default open

Set defaultOpen to reveal the content on page load:

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

<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>

Props

FieldTypeDescriptionRequiredDefault
titlestringLabel for the toggle button.Optional"properties"
defaultOpenbooleanWhether the section starts expanded.Optionalfalse
childrenReactNodeContent revealed when expanded.Yes