Skip to content
🚀 Material UI and MUI X v9 are out! Check out the announcement blogpost.
+

Accordion

The Accordion component lets users show and hide sections of related content on a page.

Anatomy

Choose your preferred delivery method, add delivery instructions, and update your saved address.

Update your billing information, select a default card, or add a new payment method.

Get shipment status by email, push notification, or SMS when an order changes.

The Accordion components form a header and panel:

  • Accordion: groups AccordionSummary and AccordionDetails. Renders a <div> element.
  • AccordionSummary: a trigger that expands or collapses the panel. Renders an h3 containing a <button> element.
  • AccordionDetails: contains the panel content. Renders a <div> element.
  • AccordionActions: groups actions for the panel. Renders a <div> element.
Anatomy
import Accordion from '@mui/material/Accordion';
import AccordionActions from '@mui/material/AccordionActions';
import AccordionDetails from '@mui/material/AccordionDetails';
import AccordionSummary from '@mui/material/AccordionSummary';
import Button from '@mui/material/Button';

<Accordion>
  <AccordionSummary>Delivery options</AccordionSummary>
  <AccordionDetails>
    Choose standard shipping, scheduled delivery, or pickup based on what is
    available for your order.
  </AccordionDetails>
  <AccordionActions>
    <Button>Cancel</Button>
    <Button>Save</Button>
  </AccordionActions>
</Accordion>;

Usage guidelines

  • Make summaries descriptive: The summary is the accordion header button, so it should clearly identify the content that expands.
  • Avoid nested controls: AccordionSummary renders a button, so don't put buttons, links, or other interactive elements inside it. Place those controls in AccordionDetails or AccordionActions instead.

Basics

Expand icon

Use the expandIcon prop on the Accordion Summary component to change the expand indicator icon. The component handles the turning upside-down transition automatically.

Download sales, traffic, and conversion reports from the previous quarter.

Receive notifications when popular items are low in stock or ready to reorder.

Expanded by default

Use the defaultExpanded prop on the Accordion component to have it opened by default.

Choose standard shipping, scheduled delivery, or pickup based on what is available for your order.

Add a gift message, choose wrapping, and hide prices on the packing slip.

Actions

Use the AccordionActions component to group buttons related to the panel content.

<Accordion>
  <AccordionSummary>Notification preferences</AccordionSummary>
  <AccordionDetails>
    Choose which account alerts are sent by email, SMS, or push notification.
  </AccordionDetails>
  <AccordionActions>
    <Button>Cancel</Button>
    <Button>Save</Button>
  </AccordionActions>
</Accordion>

Disabled item

Use the disabled prop on the Accordion component to disable interaction and focus.

Review your plan, renewal date, and the number of seats included in your subscription.

Download invoices, review payment status, or update the billing contact for your account.

Customization

Heading level

By default, the Accordion uses an h3 element for the heading. You can change the heading element using the slotProps.heading.component prop to ensure the correct heading hierarchy in your document.

<Accordion slotProps={{ heading: { component: 'h4' } }}>
  <AccordionSummary>Shipping methods</AccordionSummary>
  <AccordionDetails>
    Choose how quickly your order should arrive and whether you want delivery updates
    by email or SMS.
  </AccordionDetails>
</Accordion>

Controlled accordion

The Accordion component can be controlled or uncontrolled.

Choose the contact name and email that appear on invoices and customer emails.

Invite teammates, assign roles, and choose who can approve billing changes.

Set fulfillment rules so orders ship from the warehouse with the best stock and delivery speed.

Generate a downloadable archive of account activity, order history, and customer records.

Only one expanded at a time

Use the expanded prop with React's useState hook to allow only one Accordion item to be expanded at a time. The demo below also shows a bit of visual customization.

Connect your store, configure checkout, and choose which notifications customers receive after they place an order.

Review recent invoices, update your tax details, and choose who receives payment reminders.

Invite collaborators, assign store roles, and limit access to sensitive customer information.

Transition

Use the slots.transition and slotProps.transition props to change the Accordion's default transition.

Collapse animates the panel height and is the default transition used by the Accordion.

Unmounting collapsed content

The Accordion content is mounted by default even if it's not expanded. This default behavior has server-side rendering and SEO in mind.

If you render the Accordion Details with a big component tree nested inside, or if you have many Accordions, you may want to change this behavior by setting unmountOnExit to true inside the slotProps.transition prop to improve performance:

<Accordion slotProps={{ transition: { unmountOnExit: true } }} />

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.