Collapsible

Approved — Ready for dev

The collapsible component enables progressive experiences and efficiency within the UI by standardizing how visual groupings can collapse and expand to reveal more or less information.

Collapsible

Anatomy

  1. Container
  2. Content area
  3. Quick action button (optional)

Content regions

While the collapsible component is not consistently made up of specific atoms or molecules, it always contains a content area with two distinct regions: the primary region and the secondary region. The primary region contains all content that is visible before the user interacts with the component. The secondary region contains all content that becomes visible after the user interacts with the component. Both regions are independent, meaning each region may contain unique content inside.

Quick action button

In addition to the content regions, an optional caret quick action button may be included if the affordance is absolutely necessary. Because users are familiar with interacting with a variety of interface patterns, avoid using the caret whenever possible. The quick action button should rarely, if ever, be used on mobile. While the medium emphasis quick action button is shown here, any size or emphasis of the quick action button may be used.

Specs

Color

Element Property Value
Quick action button Colors See Quick Action Button

Spacing

There are no spacing guidelines for the container or content areas within this component. The optional quick action button is recommended to be spaced at least ∆platformSpacingTiny from the content area, wherever it is anchored.

States

Theming

There are no theming considerations for this component.

Placement

There are no placement considerations for this component.

Behavior

Note: The quick action button can either be set to appear on hover, or be persistent.

Expand

Interaction Steps Duration Easing Notes Haptics
Expand 1a. Container expands ∆motionTimeFast ∆motionTimingFunctionStandard The container expands to allow room for the secondary region.  
  1b. Quick action button rotates +180º ∆motionTimeFast ∆motionTimingFunctionStandard The quick action button rotates +180º.  
  1c. Secondary region moves in ∆motionTimeExtraFast ∆motionTimingFunctionStandard After a ∆motionTimeNano delay, the secondary region moves into place, moving downward ∆spacingPlatformTiny.  
  1d. Secondary region fades in ∆motionTimeExtraFast ∆motionTimingFunctionStandard After a ∆motionTimeNano delay, the secondary region fades in from 0–100% opacity.  

Collapse

Interaction Steps Duration Easing Notes Haptics
Expand 1a. Container collapses ∆motionTimeFast ∆motionTimingFunctionStandard The container collapses to its original size.  
  1b. Quick action button rotates +180º ∆motionTimeFast ∆motionTimingFunctionStandard The caret rotates +180º, completing a full rotation.  
  1c. Secondary region moves out ∆motionTimeExtraFast ∆motionTimingFunctionStandard The secondary region moves upward ∆spacingPlatformTiny as the cell collapses.  
  1d. Secondary region fades out ∆motionTimeExtraFast ∆motionTimingFunctionStandard The secondary region fades out from 100–0% opacity.  

Developer Docs

Vue Developer Docs

Component documentation coming soon!