Components

Expandable

Toggle to display nested properties and additional content

Expandables are useful for showing optional or detailed information that users can reveal when needed.

Basic Usage

<Expandable client:load title="Show advanced options">
  These are advanced configuration options...
</Expandable>

Default Open

This content is visible by default because it’s important for users to see.

<Expandable client:load title="Important information" defaultOpen>
  This content is visible by default...
</Expandable>

Nested Properties

Use ExpandableItem for API documentation with nested object properties:

<ExpandableList>
  <ExpandableItem client:load title="user" type="object">
    <ExpandableItem client:load title="id" type="string">
      Unique user identifier
    </ExpandableItem>
    <ExpandableItem client:load title="profile" type="object">
      <ExpandableItem client:load title="name" type="string">
        Display name
      </ExpandableItem>
    </ExpandableItem>
  </ExpandableItem>
</ExpandableList>

Props

Expandable

titlestringrequired

Header text for the expandable section

defaultOpenbooleandefault: false

Whether to start in expanded state

classNamestring

Additional CSS classes

ExpandableItem

titlestringrequired

Property name to display

typestring

Property type (e.g., “string”, “object”, “number”)

defaultOpenbooleandefault: false

Whether to start in expanded state