Components

Collapsible

Shows and hides one section of content.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; you can open the controls there. Watch the content drop in by 4 px and the chevron turn as it opens.

Live example, StorybookOpen in Storybook

Default

Collapsible starts closed. Clicking the trigger, or pressing Enter or Space, opens and closes the panel.

import { Collapsible, CollapsiblePanel, CollapsibleTrigger, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <Collapsible>
        <CollapsibleTrigger>Show details</CollapsibleTrigger>
        <CollapsiblePanel className="pt-sm">Extra details go here.</CollapsiblePanel>
      </Collapsible>
    </Provider>
  );
}

Open at start

defaultOpen renders the panel open on first paint. The user can still close it.

Extra details go here.

import { Collapsible, CollapsiblePanel, CollapsibleTrigger, Provider } from '@bigbang/ui';

export default function Open() {
  return (
    <Provider locale="en-GB">
      <Collapsible defaultOpen>
        <CollapsibleTrigger>Show details</CollapsibleTrigger>
        <CollapsiblePanel className="pt-sm">Extra details go here.</CollapsiblePanel>
      </Collapsible>
    </Provider>
  );
}

Without chevron

chevron={false} removes the chevron. The trigger shows as text only; the open state is still announced through aria-expanded.

import { Collapsible, CollapsiblePanel, CollapsibleTrigger, Provider } from '@bigbang/ui';

export default function WithoutChevron() {
  return (
    <Provider locale="en-GB">
      <Collapsible>
        <CollapsibleTrigger chevron={false}>Show details</CollapsibleTrigger>
        <CollapsiblePanel className="pt-sm">Extra details go here.</CollapsiblePanel>
      </Collapsible>
    </Provider>
  );
}

Disabled

disabled turns the trigger off and shows it faded.

import { Collapsible, CollapsiblePanel, CollapsibleTrigger, Provider } from '@bigbang/ui';

export default function Disabled() {
  return (
    <Provider locale="en-GB">
      <Collapsible disabled>
        <CollapsibleTrigger>Show details</CollapsibleTrigger>
        <CollapsiblePanel className="pt-sm">Extra details go here.</CollapsiblePanel>
      </Collapsible>
    </Provider>
  );
}

Light and dark mode

Colours come from the color-fg-* and color-icon-* tokens; neither mode needs extra settings.

Extra details go here.

import { Collapsible, CollapsiblePanel, CollapsibleTrigger, Provider } from '@bigbang/ui';

export default function Open() {
  return (
    <Provider locale="en-GB">
      <Collapsible defaultOpen>
        <CollapsibleTrigger>Show details</CollapsibleTrigger>
        <CollapsiblePanel className="pt-sm">Extra details go here.</CollapsiblePanel>
      </Collapsible>
    </Provider>
  );
}