Skip to content

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 guidelines, but Material-UI will continue to support them.

Simple Expansion Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

Controlled Accordion

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

Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget maximus est, id dignissim quam.

Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar diam eros in elit. Pellentesque convallis laoreet laoreet.

Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros, vitae egestas augue. Duis vel est augue.

Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros, vitae egestas augue. Duis vel est augue.

Customized expansion panels

Here is an example of customizing the component. You can learn more about this in the overrides documentation page.

Collapsible Group Item #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

Additional actions

In order to put an action such as a Checkbox or a button inside of the ExpansionPanelSummary, you need to stop the propagation of the focus and click events to prevent the panel from expanding/collapsing when using the action. You should also provide an aria-label for the action, otherwise the label of the nested action will be included in the label of the parent button that controls the panel expansion.

The click event of the nested action will propagate up and expand the panel unless you explicitly stop it.

The focus event of the nested action will propagate up and also focus the expansion panel unless you explicitly stop it.

If you forget to put an aria-label on the nested action, the label of the action will also be included in the label of the parent button that controls the panel expansion.

Performance

The content of ExpansionPanels is mounted by default even if the panel is not expanded. This default behavior has server-side rendering and SEO in mind. If you render expensive component trees inside your panels or simply render many panels it might be a good idea to change this default behavior by enabling the unmountOnExit in TransitionProps:

<ExpansionPanel TransitionProps={{ unmountOnExit: true }} />

As with any performance optimization this is not a silver bullet. Be sure to identify bottlenecks first and then try out these optimization strategies.

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.

Location

Select trip destination

Barbados
Select your destination of choice
Learn more

Accessibility

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#accordion)

For optimal accessibility we recommend setting id and aria-controls on the ExpansionPanelSummary. The ExpansionPanel will derive the necessary aria-labelledby and id for the content region of the panel.