Collapsible

Purpose¶

Collapsible renders a single expandable block with a trigger title and body content. It uses the same open/closed interaction model as a one-item accordion.

Clicking the trigger toggles the block. Runtime updates can replace the trigger title, body content, or open state.

Constructor¶

Collapsible(
    id: str,
    title: str,
    content: str = "",
    open: bool = False,
)

Properties¶

Property	Type	Default	Description
`title`	`str`	required	Trigger label. Python wraps constructor values as `literalString`.
`content`	`str`	`""`	Text body shown inside the expanded panel. Python wraps constructor values as `literalString`.
`open`	`bool`	`False`	Initial and externally updated open state.
`children`	inherited list	`[]`	Optional child content rendered before the text body.

Examples¶

from democrai.sdk.client import active_sdk as sdk
from democrai.sdk.ui import bound

builder.add(sdk.ui.Text("collapsible_child", "Rendered child content"))
collapsible = sdk.ui.Collapsible(
    "collapsible_static",
    "Advanced details",
    "Keep secondary content outside the default reading path.",
    open=False,
)
collapsible.set_required_permissions(["components.complex.view"])
collapsible.set_show_if({
    "conditions": [
        {
            "left": bound.store("/components_test/accordion/show", scope="page", default=True),
            "op": "==",
            "right": True,
        }
    ]
})
collapsible.set_hide_if({
    "conditions": [
        {
            "left": bound.store("/components_test/accordion/hide", scope="page", default=False),
            "op": "==",
            "right": True,
        }
    ]
})
collapsible.children.append("collapsible_child")
collapsible.allow("title.set", "content.set", "open.set")

- kind: Text
  id: collapsible_child
  text: "Rendered child content"

- kind: Collapsible
  id: collapsible_static
  title: "Advanced details"
  content: "Keep secondary content outside the default reading path."
  open: false
  required_permissions: [components.complex.view]
  show_if:
    conditions:
      - left: {type: store, scope: page, path: /components_test/accordion/show, default: true}
        op: "=="
        right: true
  hide_if:
    conditions:
      - left: {type: store, scope: page, path: /components_test/accordion/hide, default: false}
        op: "=="
        right: true
  capabilities: [title.set, content.set, open.set]
  children:
    - collapsible_child

Binding and Updates¶

title, content, and open support store binding, data-model binding, and direct property updates in the component demo.

store_bound = sdk.ui.Collapsible(
    "collapsible_store",
    "Store title",
    "Store content",
    open=bound.store("/components_test/collapsible/open", scope="page", default=False),
)
store_bound.set_prop(
    "title",
    bound.store("/components_test/collapsible/title", scope="page", default="Store title"),
)
store_bound.set_prop(
    "content",
    bound.store("/components_test/collapsible/content", scope="page", default="Store content"),
)

data_bound = sdk.ui.Collapsible(
    "collapsible_data",
    "Data title",
    "Data content",
    open=bound.data("/components_test/collapsible_model/open", default=False),
)
data_bound.set_prop(
    "title",
    bound.data("/components_test/collapsible_model/title", default="Data title"),
)
data_bound.set_prop(
    "content",
    bound.data("/components_test/collapsible_model/content", default="Data content"),
)

live = sdk.ui.Collapsible("collapsible_live", "Live title", "Live content", open=False)
live.allow("title.set", "content.set", "open.set")

- kind: Collapsible
  id: collapsible_store
  title: {type: store, scope: page, path: /components_test/collapsible/title, default: "Store title"}
  content: {type: store, scope: page, path: /components_test/collapsible/content, default: "Store content"}
  open: {type: store, scope: page, path: /components_test/collapsible/open, default: false}

- kind: Collapsible
  id: collapsible_data
  title: "@data/components_test/collapsible_model/title"
  content: "@data/components_test/collapsible_model/content"
  open: "@data/components_test/collapsible_model/open"

- kind: Collapsible
  id: collapsible_live
  title: "Live title"
  content: "Live content"
  open: false
  capabilities: [title.set, content.set, open.set]

Runtime updates must target the current surface:

surface_id = ctx["_surface_id"]

return sdk.effects.respond(
    sdk.effects.ui_messages([
        {
            "stateUpdate": {
                "scope": "page",
                "values": {
                    "/components_test/collapsible/title": next_title,
                    "/components_test/collapsible/content": next_content,
                    "/components_test/collapsible/open": True,
                },
            }
        },
        sdk.ui.Builder.build_data_model_update_payload(
            surface_id=surface_id,
            data={
                "components_test": {
                    "collapsible_model": {
                        "title": next_title,
                        "content": next_content,
                        "open": True,
                    }
                }
            },
        ),
    ]),
    sdk.effects.ui_property_update("collapsible_live", "title", next_title, surface_id=surface_id),
    sdk.effects.ui_property_update("collapsible_live", "content", next_content, surface_id=surface_id),
    sdk.effects.ui_property_update("collapsible_live", "open", True, surface_id=surface_id),
)

Renderer Notes¶

Desktop renders Collapsible with a dedicated compact disclosure block. Binding strategies are declared for title, content, open, and children.

Web renders a shadcn collapsible primitive. Child content is rendered before the content text.

Screenshots¶

Desktop:

Collapsible desktop

Web:

Collapsible web