Collapsible

A single expandable section with animated open/close. Use for "Show more" patterns, technical details, or any card-level secondary content; for stacked lists, use @xsolla/xui-b2b-accordion.

Installation

npm install @xsolla/xui-b2b-collapsible

Imports

import {
  Collapsible,
  type CollapsibleProps,
  type CollapsibleView,
} from '@xsolla/xui-b2b-collapsible';

Quick start

import { Collapsible } from '@xsolla/xui-b2b-collapsible';

<Collapsible title="Setup" caption="Step 1 of 3" view="white-surface">
  <p>Body content goes here.</p>
</Collapsible>;

API Reference

<Collapsible>

| Prop | Type | Default | Description | | --- | --- | --- | --- | | title | ReactNode | — | Required. Title text or node in the trigger row. | | children | ReactNode | — | Required. Body content shown when expanded. | | view | CollapsibleView | "without-surface" | Visual surface style. | | caption | ReactNode | — | Secondary text rendered below the title. | | icon | ReactNode | — | Optional 32×32 left slot. Consumer controls styling — wrap with IconWrapper or pass a Checkbox. Click events on this slot are stopped before they reach the trigger. | | trailing | ReactNode | — | Content to the right of the text, before the chevron (e.g. Status). | | defaultOpen | boolean | false | Initial open state for uncontrolled usage. | | open | boolean | — | Controlled open state. | | onOpenChange | (open: boolean) => void | — | Called when open state changes. | | className | string | — | CSS class applied to the root element. | | aria-label | string | auto | Accessible label for the trigger. Defaults to title when it is a string. |

Inherits ThemeOverrideProps (themeMode, themeProductContext).

CollapsibleView

type CollapsibleView = 'without-surface' | 'white-surface' | 'grey-surface';

| Value | Appearance | | --- | --- | | without-surface | No background; bottom border divider. | | white-surface | White card with rounded corners. | | grey-surface | Tinted overlay-mono card with rounded corners. |

Deprecated props

The following are still accepted for migration from @xsolla/publisher-account-core and trigger an IDE @deprecated warning:

| Deprecated | Replacement | Notes | | --- | --- | --- | | onChange | onOpenChange | Same (isOpen: boolean) => void signature. | | statusIcon | trailing | Same shape. | | description | caption | Covers the legacy lg-size description. |

Props with no equivalent (intentional redesign): backgroundColor, size, childContentPadding, label (sm size), openingState (use open / defaultOpen).

Examples

Three view variants

import { Collapsible } from '@xsolla/xui-b2b-collapsible';

<>
  <Collapsible title="Without surface" view="without-surface">
    <p>Content</p>
  </Collapsible>
  <Collapsible title="White surface" view="white-surface">
    <p>Content</p>
  </Collapsible>
  <Collapsible title="Grey surface" view="grey-surface">
    <p>Content</p>
  </Collapsible>
</>;

Open by default

import { Collapsible } from '@xsolla/xui-b2b-collapsible';

<Collapsible title="Pre-expanded" view="white-surface" defaultOpen>
  <p>Visible on first render.</p>
</Collapsible>;

With icon slot

import { Collapsible } from '@xsolla/xui-b2b-collapsible';
import { IconWrapper } from '@xsolla/xui-icon-wrapper';
import { ReverseLeft } from '@xsolla/xui-icons-base';

<Collapsible
  title="Setup"
  view="white-surface"
  icon={
    <IconWrapper size="md" shape="smooth">
      <ReverseLeft aria-hidden />
    </IconWrapper>
  }
>
  <p>Content</p>
</Collapsible>;

With trailing slot

import { Collapsible } from '@xsolla/xui-b2b-collapsible';
import { Status } from '@xsolla/xui-status';

<Collapsible
  title="Publish your game store page"
  caption="Publishing"
  view="white-surface"
  trailing={
    <Status palette="warning" size="md" labelType="dot-color">In progress</Status>
  }
>
  <p>Content</p>
</Collapsible>;

Controlled

import { useState } from 'react';
import { Collapsible } from '@xsolla/xui-b2b-collapsible';

function ControlledCollapsible() {
  const [open, setOpen] = useState(false);
  return (
    <Collapsible
      title="Controlled"
      view="white-surface"
      open={open}
      onOpenChange={setOpen}
    >
      <p>Content</p>
    </Collapsible>
  );
}

Accessibility

• Trigger has role="button", tabIndex={0}, aria-expanded, and aria-controls linking to the panel.
• Responds to Enter and Space; the icon and trailing slots stop click/keyboard events so embedded controls do not toggle the trigger.
• Panel content is always in the DOM (hidden via grid-template-rows: 0fr) for screen-reader access.

Migration

Migrating from @xsolla/publisher-account-core:

// Before
import { Collapsible } from '@xsolla/publisher-account-core';

<Collapsible
  title="Setup"
  description="Step 1 of 3"
  backgroundColor="primary"
  size="lg"
  statusIcon={<CheckIcon />}
  openingState={false}
  onChange={(isOpen) => console.log(isOpen)}
>
  content
</Collapsible>;

// After
import { Collapsible } from '@xsolla/xui-b2b-collapsible';

<Collapsible
  title="Setup"
  caption="Step 1 of 3"
  view="white-surface"
  trailing={<CheckIcon aria-hidden />}
  defaultOpen={false}
  onOpenChange={(isOpen) => console.log(isOpen)}
>
  content
</Collapsible>;