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

Allows for showing/hiding content.

Edit the code below to see your changes live!

function Example() {
  const [title, setTitle] = useState('Show more');
  const handleChange = (isOpen: boolean) => setTitle(isOpen ? 'Show less' : 'Show more');

  return (
    <Collapse onCollapseChange={handleChange} title={title}>
      <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. Aute elit occaecat esse ea fugiat esse. Reprehenderit sunt ea ea
        mollit commodo tempor amet fugiat.
      </Text>
    </Collapse>
  );
}

Props

Prop name
Type
Default
Description
title *string

Collapse title.

initiallyOpenboolean

Defines if panel with content is visible by default.

onCollapseChange(isOpen: boolean) => void

Function that will be called when a title is clicked.

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.