Collapsible

Done

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.

Anatomy

Container
Content area
Quick action button (optional)
Divider

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

States

Theming

There are no theming considerations for this component.

Placement

There are no placement considerations for this component.

Behavior

Expand

Interaction	Steps	Duration	Easing	Notes
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
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!