DocsDocsSDKs

Collapsible

React SDK guidance for Collapsible.

Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

When to use it

Use Collapsible when a single block needs to reveal secondary content without turning the whole area into a list of separate expandable items. It is a good fit for advanced filters, optional product details, and setup forms with extra controls.

If you have several sibling sections and visitors need to compare or open them one by one, Accordion is usually the better primitive.

Think one expandable block, not a stacked FAQ

Collapsible is best for one root area with one trigger and one content region. If the pattern reads like a list of multiple expandable rows, document it with Accordion instead.

Slot strategy

  • Collapsible owns the open or closed state.
  • CollapsibleTrigger is the interactive control and often works best with asChild on a Button.
  • CollapsibleContent wraps the revealed region and can contain any normal layout.

Keep the trigger label explicit so the visitor knows what becomes visible before they open it.

Behavior and theming guidance

Use defaultOpen when the content is important enough to show on first load but still benefits from being collapsible later. The content area already animates open and closed, so avoid adding extra motion on nested elements unless it serves a clear purpose.

Prefer styling the revealed container with normal layout utilities like spacing, border, or surface tokens. That keeps the primitive reusable while letting the surrounding feature decide how prominent the expanded state should feel.

Contract scope

  • Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
  • Public import: @enadhq/enad-react-sdk/client/ui-resolver.
  • Playground route: /sandbox?component=Collapsible.
  • Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes

Collapsible

# Collapsible > Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe. Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior. ## Playground - Import path: `@enadhq/enad-react-sdk/client/ui-resolver`. - Live playground: [/components/base-ui/collapsible](https://sdk.enad.io/components/base-ui/collapsible). ## When to use it Use `Collapsible` when a single block needs to reveal secondary content without turning the whole area into a list of separate expandable items. It is a good fit for advanced filters, optional product details, and setup forms with extra controls. If you have several sibling sections and visitors need to compare or open them one by one, `Accordion` is usually the better primitive. > **Think one expandable block, not a stacked FAQ** > > `Collapsible` is best for one root area with one trigger and one content region. If the pattern > reads like a list of multiple expandable rows, document it with `Accordion` instead. ## Slot strategy - `Collapsible` owns the open or closed state. - `CollapsibleTrigger` is the interactive control and often works best with `asChild` on a `Button`. - `CollapsibleContent` wraps the revealed region and can contain any normal layout. Keep the trigger label explicit so the visitor knows what becomes visible before they open it. ## Behavior and theming guidance Use `defaultOpen` when the content is important enough to show on first load but still benefits from being collapsible later. The content area already animates open and closed, so avoid adding extra motion on nested elements unless it serves a clear purpose. Prefer styling the revealed container with normal layout utilities like spacing, border, or surface tokens. That keeps the primitive reusable while letting the surrounding feature decide how prominent the expanded state should feel. ## Contract scope - Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior. - Public import: `@enadhq/enad-react-sdk/client/ui-resolver`. - Playground route: /sandbox?component=Collapsible. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes