The collapse component allows users to expand or collapse sections of content.

Design Guidelines#

Use when#

  • For information that is lower priority or that users don’t need to see all the time.

Don't Use When#

  • To hide error messages or other critical information that requires an immediate action.

Visual Style#

  • Follow spacing guidelines for content within.
  • Affordance icon (chevron) should always be left of the label.
  • Affordance icon should reflect expand (v) and collapse (>) status.


  • Can be placed within modals or cards.


  • Collapse default state is always closed (collapsed).
  • Clicking on the collapse component header expands to reveal content and collapses to hide content.
  • Any number of panels can be expanded at a time.



  • Use titles that set clear expectations about the type of content grouped upon expand.
  • Do not use punctuation for titles.
  • Write in sentence case (capitalize the first word and proper nouns only).


  • Prioritize content so the user knows what to do first.
  • Be clear if an action is required.
  • Write in sentence case (capitalize the first word and proper nouns only).

Data Entry Actions#

  • Limit the number of actions.
  • Prioritize actions so user knows what to do first.
  • Should be clear and predictable.
  • See Actionable Words for additional guidance.

Collapse Examples#


Use when additional content is potentially needed but does not need to be seen all the time.

Related components#

Last updated on by Paulo Andrade