The collapsible component is a utility for creating regions of content that can expand/collapse with a simple animation.

Collapsible areas are made up of two parts:

  1. The trigger element (optional). This is an actionable element that the user interacts with to toggle the state of the component. This is not necessary if the state is being toggled programmatically.
  2. The panel element. This is the content that will actually expand/collapse when the state is toggled.

The Collapsible component uses two subcomponents to represent these parts: Collapsible.Trigger and Collapsible.Panel:

import { Collapsible } from '@sproutsocial/racine'

In the example above, a Button is used to toggle the state, and is wrapped in the Trigger subcomponent. The content to be collapsed/expanded is wrapped in the Panel.

The state of the content is passed to the isOpen prop of the parent Collapsible component, and that state is used by Trigger and Panel to ensure that both elements are labelled appropriately for accessibility.


If the children of the collapsible panel have a top or bottom margin, it will throw off the calculations for the height of the content. The total amount of vertical margin (in pixels) can be supplied to this prop to correct this.



If the collapsible area is toggled by the user, a trigger element should be provided and wrapped in the Collapsible.Trigger subcomponent. The element will be given the appropriate ARIA attributes for accessibility.


The content that is actually expanding/collapsing should be wrapped in Collapsible.Panel. This component measures it’s children and provides a simple animation for opening/closing the content.


Because the trigger and panel elements can be rendered anywhere within a Collapsible component, you can easily create more complex behaviors and layouts by combining Collapsible with other components. Just remember that the base Collapsible component needs to be above both the panel and the trigger in the tree.

Collapsible also has niche use cases where an element may need to visually display inner content while collapsed. This behavior can be achieved via the collapsedHeight and openHeight props, which basically act as min-height and max-height for open and closed states. Setting these values may trigger a scroll if your content overflows beyond the values you’ve selected.