Balance Logo
Reckon Design System
Open playroom


Renders a single collapsable item.
pnpm add @balance-web/collapsable
Import usage
import {
} from '@balance-web/collapsable';
  • Code
  • API


  • Card — Cards are highly flexible component to display a subject with its related information.
  • Tile — Tiles are used to display context information to help user complete a task or act as an entry point for more detail. They can also be used to display a list of loosely connected options to help the user gather information quickly at a glance.
  • ArrayField — The ArrayField is a form input for capturing multiple instances of multiple fields, saving valuable screen space.
  • Accordion — Accordions are used to group similar content and hide or show it depending on user needs or preferences. Accordions give users more granular control over the interface and help digest content in stages, rather than all at once.


This package exposes a number of primitives that can be used to compose collapsable content.


This is the root primitive of a Collapsable.

The open/closed state is controlled by the consumer.

Basic usage
const [isOpen, setIsOpen] = useState(false)
<Collapsable isOpen={isOpen} setIsOpen={setIsOpen}>{/* Collapsable primitives */}</Collapsable>


This primitive houses the heading and the trigger.

Basic usage
<Collapsable.Header>{/* customer header content */}</Collapsable.Header>

NOTE: The trigger is always renderred to the right and is connected to the open/closed state and toggle function autmatically.


This primitive houses the content that can be toggled.

Basic usage

You can put any type of content in here except large forms.

<Collapsable.Content>{/* custom content */}</Collapsable.Content>


Text content

Edit in Playroom


Copyright © 2024 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo