Collapse

Overview

The Collapse component can hide/reveal content within a panel.

When to use:

  • Use Collapse to reduce clutter, hiding non-essential information or options on a panel or modal.

Implementation

Collapse is a headless compound component. The root provides state via context; place Collapse.Trigger and Collapse.Panel anywhere inside. State can be uncontrolled (initiallyOpen) — no extra wiring required.

Edit the code below to see your changes live!

<Collapse>
  <Collapse.Trigger title="Show more" />
  <Collapse.Panel backgroundColor="secondary20" padding="medium">
    <Text>
      Ea tempor sunt amet labore proident dolor proident commodo in exercitation
      ea nulla sunt pariatur. Nulla sunt ipsum do eu consectetur exercitation
      occaecat labore aliqua.
    </Text>
  </Collapse.Panel>
</Collapse>

Props

Prop name
Type
Default
Description
children *React.ReactNode

Should include a Collapse.Trigger and a Collapse.Panel. Placement within the subtree is up to the consumer.

initiallyOpenbooleanfalse

Initial open state when uncontrolled.

isOpenboolean

Controlled open state. When provided, the component is controlled and ignores initiallyOpen.

onCollapseChange(isOpen: boolean) => void

Fires when the trigger toggles, and when an open panel is auto-closed because disabled became true.

disabledboolean

Disables the trigger so it can't be toggled. If the panel is open when disabled becomes true, it auto-collapses and fires onCollapseChange(false).

Props ending with * are required

Do's and Don'ts

Do
Users should be able tell what’s beneath the collapse button without having to open it - make sure the label is specific and helpful!
Collapse buttons should read like actions, and start with the word “Show”.
Collapsed content should be lower priority information that users don’t always need to see.
Left align directly under the content that is collapsed.
Position the collapsible content immediately after the collapse button.
Chevron arrow should flip vertically when component is toggled, to indicate the state of showing/hiding the content.
Don't
Do not use Collapse to hide elements necessary to complete a form - only optional/extra content.
Do not move Collapse component after click; instead, show the new content directly below the component and let the component remain stationary.