Expansion Panels

Expansion panels contain creation flows and allow lightweight editing of an element.

An expansion panel is a lightweight container that may either stand alone or be connected to a larger surface, such as a card.

Note: Expansion panels are no longer documented in the Material Design documentation.

Simple Expansion Panel

Controlled Accordion

Extend the default panel behavior to create an accordion with the ExpansionPanel component.

Secondary heading and Columns

Multiple columns can be used to structure the content, and a helper text may be added to the panel to assist the user.

Customized Expansion Panel

If you have been reading the overrides documentation page but you are not confident jumping in, here is one example of how you can customize the background color of the ExpansionPanelSummary and padding of ExpansionPanelDetails.

⚠️ While the material design specification encourages theming, these examples are off the beaten path.

API

• <ExpansionPanel />
• <ExpansionPanelActions />
• <ExpansionPanelDetails />
• <ExpansionPanelSummary />