Balance Logo
Reckon Design System
Open playroom


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.
pnpm add @balance-web/accordion
Import usage
import {
} from '@balance-web/accordion';
  • 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.
  • Collapsable — Renders a single collapsable item.

Design guidelines

  • Don’t place accordions inside accordions
  • Don't place large forms inside accordions
  • Keep the labels short to aid scanability
  • Accordions can be used for filtering - however for use within forms please use the Array Field component


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


Renders the root of an accordion.

Basic usage

All accordion primitives must be used as children of this component.

<Accordion>{ /* accordion primitives */}<Accordion>

Has 2 possible values:


Only 1 item can be open at a time. Opening an item closes the currently open item.

<Accordion type="single"><Accordion>


Multiple items can be open at the same time.

<Accordion type="single"><Accordion>

Set an item to be open by default.

<Accordion defaultValue="unique-item-value-3"><Accordion>

This prop is only effectual in uncontrolled mode.

Controlled vs uncontrolled

By default, the Accordion is uncontrolled which means users can toggle items without the value being set manually.

The value and onValueChange props can be used to gain full control of the component.

Note: The type of value and onValueChange change based on the value of the type prop.

/** When type=single */
const [value, setValue] = useState("unique-item-value-3")
<Accordion value={value} onValueChange={(value) => setValue(value)}></Accordion>
/** When type=multiple */
const [values, setValues] = useState(["unique-item-value-3"])
<Accordion value={values} onValueChange={(value) => setValue(values)}></Accordion>


Renders a single item.

Basic usage

Can only be used inside Accordion.

<Accordion.Item>{ /** accordion item primitives */}<Accordion.Item>

A unique value for the item that's used to toggle its open/closed state. This value is what the defaultValue, value and onValueChange props in Accordion refer to.

<Accordion.Item value="item-1"><Accordion.Item>
<Accordion.Item value="item-2"><Accordion.Item>
<Accordion.Item value="item-3"><Accordion.Item>


Renders the header for an item that also serves as a trigger for open/close.

Basic usage

Can only be used inside an Accordion.Item.

Children are rendered in a flex:row container.

<Heading level="6" align="start">


Renders the collapsible content for an item.

Basic usage

Can only be used inside an Accordion.Item.



Single uncontrolled

Edit in Playroom

Multiple uncontrolled

Single controlled

Multiple controlled

Custom UI header

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