Geist Design System

Collapse

A set of headings, vertically stacked, that each reveal an related section of content. Commonly referred to as an accordion.

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Expanded

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Multiple

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Best Practices

When to use

  • Use Collapse for optional, advanced, or repetitive content that most users skip on most visits (FAQ, advanced settings, request payload preview).
  • For top-level structure that every user reads, use page sections with regular headings; collapsing primary content hides what the page is about.
  • Single Collapse for one optional block. CollapseGroup for a related set; switch to Tabs when the items are sibling views, not optional drill-downs.

Behavior

  • Default state is closed unless the first-time visitor must read the content to act.
  • Inside a CollapseGroup, allow only one panel open at a time when items are mutually exclusive; allow multiple when items are independent.
  • Animate the open/close transition; jump-cuts make the page feel like it teleported.
  • Don’t nest Collapse more than one level deep. Two-level nesting hides too much and breaks the keyboard tab path.

Content

  • Heading is Title Case and names the topic, not the action (Advanced Settings, not Show Advanced Settings).
  • Body is sentence case prose with normal section formatting; treat the panel as a small page, not a tooltip.
  • Don’t put primary destructive actions inside a closed Collapse; the user has to click twice to reach the warning.

Accessibility

  • The trigger is a <button> with aria-expanded that flips on toggle and aria-controls pointing at the panel id.
  • Enter and Space toggle. Don’t bind any other key globally; arrow keys move focus inside the panel content.
  • Render the panel content in the DOM when closed (with hidden or visibility) so search and find-in-page still hit it; lazy-render only for expensive content.