---
productId: material-ui
title: React Accordion component
components: Accordion, AccordionActions, AccordionDetails, AccordionSummary
githubLabel: 'scope: accordion'
materialDesign: https://m1.material.io/components/expansion-panels.html
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
githubSource: packages/mui-material/src/Accordion
---

# Accordion

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



:::info
This component is no longer documented in the [Material Design guidelines](https://m2.material.io/), but Material UI will continue to support it.
:::

## Anatomy

```tsx
import Accordion from '@mui/material/Accordion';
import AccordionActions from '@mui/material/AccordionActions';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Button from '@mui/material/Button';

export default function AccordionUsage() {
  return (
    <div>
      <Accordion>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography component="span">Delivery details</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Choose your preferred delivery method, add delivery instructions, and
            update your saved address.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography component="span">Payment method</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Update your billing information, select a default card, or add a new
            payment method.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion defaultExpanded>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography component="span">Order updates</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Get shipment status by email, push notification, or SMS when an order
            changes.
          </Typography>
        </AccordionDetails>
        <AccordionActions>
          <Button>Cancel</Button>
          <Button>Save</Button>
        </AccordionActions>
      </Accordion>
    </div>
  );
}

```

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.

```jsx title="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.

```tsx
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';

export default function AccordionExpandIcon() {
  return (
    <div>
      <Accordion>
        <AccordionSummary expandIcon={<ArrowDownwardIcon />}>
          <Typography component="span">Performance reports</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Download sales, traffic, and conversion reports from the previous
            quarter.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary expandIcon={<ArrowDropDownIcon />}>
          <Typography component="span">Inventory alerts</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Receive notifications when popular items are low in stock or ready to
            reorder.
          </Typography>
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

```

### Expanded by default

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

```tsx
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

export default function AccordionExpandDefault() {
  return (
    <div>
      <Accordion defaultExpanded>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography component="span">Delivery options</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Choose standard shipping, scheduled delivery, or pickup based on what is
            available for your order.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography component="span">Gift options</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Add a gift message, choose wrapping, and hide prices on the packing slip.
          </Typography>
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

```

### Actions

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

```jsx
<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.

```tsx
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

export default function DisabledAccordion() {
  return (
    <div>
      <Accordion>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography component="span">Active subscription</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Review your plan, renewal date, and the number of seats included in your
            subscription.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography component="span">Billing history</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Download invoices, review payment status, or update the billing contact
            for your account.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion disabled>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography component="span">Cancellation unavailable</Typography>
        </AccordionSummary>
      </Accordion>
    </div>
  );
}

```

## 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.

```jsx
<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.

```tsx
import * as React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionDetails from '@mui/material/AccordionDetails';
import AccordionSummary from '@mui/material/AccordionSummary';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

export default function ControlledAccordions() {
  const [expanded, setExpanded] = React.useState<string | false>(false);

  const handleChange =
    (panel: string) => (_event: React.SyntheticEvent, isExpanded: boolean) => {
      setExpanded(isExpanded ? panel : false);
    };

  return (
    <div>
      <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography component="span" sx={{ width: '33%', flexShrink: 0 }}>
            Account
          </Typography>
          <Typography component="span" sx={{ color: 'text.secondary' }}>
            Primary contact and timezone
          </Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Choose the contact name and email that appear on invoices and customer
            emails.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography component="span" sx={{ width: '33%', flexShrink: 0 }}>
            Team access
          </Typography>
          <Typography component="span" sx={{ color: 'text.secondary' }}>
            3 admins, 12 members
          </Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Invite teammates, assign roles, and choose who can approve billing
            changes.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography component="span" sx={{ width: '33%', flexShrink: 0 }}>
            Order routing
          </Typography>
          <Typography component="span" sx={{ color: 'text.secondary' }}>
            Routes to the closest warehouse
          </Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Set fulfillment rules so orders ship from the warehouse with the best
            stock and delivery speed.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion expanded={expanded === 'panel4'} onChange={handleChange('panel4')}>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography component="span" sx={{ width: '33%', flexShrink: 0 }}>
            Data export
          </Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Generate a downloadable archive of account activity, order history, and
            customer records.
          </Typography>
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

```

:::info

- A component is **controlled** when it's managed by its parent using props.
- A component is **uncontrolled** when it's managed by its own local state.

Learn more about controlled and uncontrolled components in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
:::

### 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.

```tsx
import * as React from 'react';
import { styled } from '@mui/material/styles';
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
import MuiAccordionSummary, {
  AccordionSummaryProps,
  accordionSummaryClasses,
} from '@mui/material/AccordionSummary';
import MuiAccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';

const Accordion = styled((props: AccordionProps) => (
  <MuiAccordion disableGutters elevation={0} square {...props} />
))(({ theme }) => ({
  border: `1px solid ${theme.palette.divider}`,
  '&:not(:last-child)': {
    borderBottom: 0,
  },
  '&::before': {
    display: 'none',
  },
}));

const AccordionSummary = styled((props: AccordionSummaryProps) => (
  <MuiAccordionSummary
    expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
    {...props}
  />
))(({ theme }) => ({
  backgroundColor: 'rgba(0, 0, 0, .03)',
  flexDirection: 'row-reverse',
  [`& .${accordionSummaryClasses.expandIconWrapper}.${accordionSummaryClasses.expanded}`]:
    {
      transform: 'rotate(90deg)',
    },
  [`& .${accordionSummaryClasses.content}`]: {
    marginLeft: theme.spacing(1),
  },
  ...theme.applyStyles('dark', {
    backgroundColor: 'rgba(255, 255, 255, .05)',
  }),
}));

const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
  padding: theme.spacing(2),
  borderTop: '1px solid rgba(0, 0, 0, .125)',
}));

export default function CustomizedAccordions() {
  const [expanded, setExpanded] = React.useState<string | false>('panel1');

  const handleChange =
    (panel: string) => (_event: React.SyntheticEvent, newExpanded: boolean) => {
      setExpanded(newExpanded ? panel : false);
    };

  return (
    <div>
      <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
        <AccordionSummary>
          <Typography component="span">Account setup</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Connect your store, configure checkout, and choose which notifications
            customers receive after they place an order.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
        <AccordionSummary>
          <Typography component="span">Billing alerts</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Review recent invoices, update your tax details, and choose who receives
            payment reminders.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
        <AccordionSummary>
          <Typography component="span">Team permissions</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Invite collaborators, assign store roles, and limit access to sensitive
            customer information.
          </Typography>
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

```

### Transition

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

```tsx
import * as React from 'react';
import Accordion, {
  AccordionSlots,
  accordionClasses,
} from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails, {
  accordionDetailsClasses,
} from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Fade from '@mui/material/Fade';

export default function AccordionTransition() {
  const [expanded, setExpanded] = React.useState(false);

  const handleExpansion = (_event: React.SyntheticEvent, isExpanded: boolean) => {
    setExpanded(isExpanded);
  };

  return (
    <div>
      <Accordion
        expanded={expanded}
        onChange={handleExpansion}
        slots={{ transition: Fade as AccordionSlots['transition'] }}
        slotProps={{ transition: { timeout: 400 } }}
        sx={[
          expanded
            ? {
                [`& .${accordionClasses.region}`]: {
                  height: 'auto',
                },
                [`& .${accordionDetailsClasses.root}`]: {
                  display: 'block',
                },
              }
            : {
                [`& .${accordionClasses.region}`]: {
                  height: 0,
                },
                [`& .${accordionDetailsClasses.root}`]: {
                  display: 'none',
                },
              },
        ]}
      >
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography component="span">Custom transition using Fade</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            The Fade transition animates opacity when the details are shown or
            hidden.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography component="span">Default transition using Collapse</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Collapse animates the panel height and is the default transition used by
            the Accordion.
          </Typography>
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

```

### 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:

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


# Accordion API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Accordion](https://deploy-preview-48559--material-ui.netlify.app/material-ui/react-accordion/)

## Import

```jsx
import Accordion from '@mui/material/Accordion';
// or
import { Accordion } from '@mui/material';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| children | `node` | - | Yes |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| defaultExpanded | `bool` | `false` | No |  |
| disabled | `bool` | `false` | No |  |
| disableGutters | `bool` | `false` | No |  |
| expanded | `bool` | - | No |  |
| onChange | `function(event: React.SyntheticEvent, expanded: boolean) => void` | - | No |  |
| slotProps | `{ heading?: func \| object, region?: func \| object, root?: func \| object, transition?: func \| object }` | `{}` | No |  |
| slots | `{ heading?: elementType, region?: elementType, root?: elementType, transition?: elementType }` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element ([Paper](https://deploy-preview-48559--material-ui.netlify.app/material-ui/api/paper/)).

## Inheritance

While not explicitly documented above, the props of the [Paper](https://deploy-preview-48559--material-ui.netlify.app/material-ui/api/paper/) component are also available on Accordion.

## Theme default props

You can use `MuiAccordion` to change the default props of this component with the theme.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| root | `Paper` | `.MuiAccordion-root` | The component that renders the root. |
| heading | `'h3'` | `.MuiAccordion-heading` | The component that renders the heading. |
| transition | `Collapse` | - | The component that renders the transition.
[Follow this guide](/material-ui/transitions/#transition-slots) to learn more about the requirements for this component. |
| region | `'div'` | `.MuiAccordion-region` | The component that renders the region. |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| `.Mui-disabled` | - | State class applied to the root element if `disabled={true}`. |
| `.Mui-expanded` | - | State class applied to the root element if `expanded={true}`. |
| - | gutters | Styles applied to the root element unless `disableGutters={true}`. |
| - | rounded | Styles applied to the root element unless `square={true}`. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/mui-material/src/Accordion/Accordion.js](https://github.com/mui/material-ui/tree/HEAD/packages/mui-material/src/Accordion/Accordion.js)

# AccordionActions API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Accordion](https://deploy-preview-48559--material-ui.netlify.app/material-ui/react-accordion/)

## Import

```jsx
import AccordionActions from '@mui/material/AccordionActions';
// or
import { AccordionActions } from '@mui/material';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| children | `node` | - | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| disableSpacing | `bool` | `false` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiAccordionActions` to change the default props of this component with the theme.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | root | Styles applied to the root element. |
| - | spacing | Styles applied to the root element unless `disableSpacing={true}`. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/mui-material/src/AccordionActions/AccordionActions.js](https://github.com/mui/material-ui/tree/HEAD/packages/mui-material/src/AccordionActions/AccordionActions.js)

# AccordionDetails API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Accordion](https://deploy-preview-48559--material-ui.netlify.app/material-ui/react-accordion/)

## Import

```jsx
import AccordionDetails from '@mui/material/AccordionDetails';
// or
import { AccordionDetails } from '@mui/material';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| children | `node` | - | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiAccordionDetails` to change the default props of this component with the theme.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | root | Styles applied to the root element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/mui-material/src/AccordionDetails/AccordionDetails.js](https://github.com/mui/material-ui/tree/HEAD/packages/mui-material/src/AccordionDetails/AccordionDetails.js)

# AccordionSummary API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Accordion](https://deploy-preview-48559--material-ui.netlify.app/material-ui/react-accordion/)

## Import

```jsx
import AccordionSummary from '@mui/material/AccordionSummary';
// or
import { AccordionSummary } from '@mui/material';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| children | `node` | - | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| expandIcon | `node` | - | No |  |
| focusVisibleClassName | `string` | - | No |  |
| slotProps | `{ content?: func \| object, expandIconWrapper?: func \| object, root?: func \| object }` | `{}` | No |  |
| slots | `{ content?: elementType, expandIconWrapper?: elementType, root?: elementType }` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |

> **Note**: The `ref` is forwarded to the root element (HTMLButtonElement).

> Any other props supplied will be provided to the root element ([ButtonBase](https://deploy-preview-48559--material-ui.netlify.app/material-ui/api/button-base/)).

## Inheritance

While not explicitly documented above, the props of the [ButtonBase](https://deploy-preview-48559--material-ui.netlify.app/material-ui/api/button-base/) component are also available on AccordionSummary.

## Theme default props

You can use `MuiAccordionSummary` to change the default props of this component with the theme.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| root | `ButtonBase` | `.MuiAccordionSummary-root` | The component that renders the root slot. |
| content | `div` | `.MuiAccordionSummary-content` | The component that renders the content slot. |
| expandIconWrapper | `div` | `.MuiAccordionSummary-expandIconWrapper` | The component that renders the expand icon wrapper slot. |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| `.Mui-disabled` | - | State class applied to the root element if `disabled={true}`. |
| `.Mui-expanded` | - | State class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`. |
| `.Mui-focusVisible` | - | State class applied to the ButtonBase root element if the button is keyboard focused. |
| - | gutters | Styles applied to the root element unless `disableGutters={true}`. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/mui-material/src/AccordionSummary/AccordionSummary.js](https://github.com/mui/material-ui/tree/HEAD/packages/mui-material/src/AccordionSummary/AccordionSummary.js)