Accordion.mdx

group	package	title	order	slug	category	description	props	import	source	docs	styles
mantine-core	@mantine/core	Accordion	1	/core/accordion/	data-display	Divide content into collapsible sections	Accordion AccordionControl AccordionItem AccordionPanel	import { Accordion } from '@mantine/core';	mantine-core/src/Accordion/Accordion.tsx	core/Accordion.mdx	Accordion

import { AccordionDemos } from '@mantine/demos';

Usage

Custom control label

<Demo data={AccordionDemos.label} demoProps={{ toggle: true }} />

Change chevron

With icons

<Demo data={AccordionDemos.icons} demoProps={{ toggle: true }} />

Change transition

To change transition duration, set transitionDuration prop:

To disable transitions, set transitionDuration to 0:

Control state

When multiple={false}, set value as string:

import { useState } from 'react';
import { Accordion } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState<string | null>(null);

  return (
    <Accordion value={value} onChange={setValue}>
      <Accordion.Item value="item-1">
        <Accordion.Control>control-1</Accordion.Control>
        <Accordion.Panel>panel-1</Accordion.Panel>
      </Accordion.Item>

      <Accordion.Item value="item-2">
        <Accordion.Control>control-2</Accordion.Control>
        <Accordion.Panel>panel-2</Accordion.Panel>
      </Accordion.Item>
    </Accordion>
  );
}

When multiple={true}, set value as an array of strings:

import { useState } from 'react';
import { Accordion } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState<string[]>([]);

  return (
    <Accordion multiple value={value} onChange={setValue}>
      <Accordion.Item value="item-1">
        <Accordion.Control>control-1</Accordion.Control>
        <Accordion.Panel>panel-1</Accordion.Panel>
      </Accordion.Item>

      <Accordion.Item value="item-2">
        <Accordion.Control>control-2</Accordion.Control>
        <Accordion.Panel>panel-2</Accordion.Panel>
      </Accordion.Item>
    </Accordion>
  );
}

Compose controls

You can add any additional elements that will be displayed next to Accordion.Control, for example, you can add ActionIcon or Menu:

Disabled items

Set disabled prop on Accordion.Control component to disable it. Disabled items cannot be activated with mouse or keyboard, will be skipped when user navigates with arrow keys:

<Demo data={AccordionDemos.disabled} demoProps={{ toggle: true }} />

Unstyled Accordion

Set unstyled prop on Accordion component to remove all non-essential library styles. It can be used to style component with Styles API without overriding any styles.

<Demo data={AccordionDemos.unstyled} demoProps={{ toggle: true }} />

Styles API

Use Styles API to customize Accordion styles:

<Demo data={AccordionDemos.stylesApi} demoProps={{ toggle: true }} />

Data attributes

Accordion elements have data- attributes that can be used with Styles API:

• data-active attribute is added to Accordion.Item root element when associated panel is expanded
• data-rotate attribute is added to chevron icon when icon should rotate (controlled by disableChevronRotation and expanded state of associated panel)

import { Accordion } from '@mantine/core';

function Demo() {
  return (
    <Accordion
      styles={{
        item: {
          // styles added to all items
          backgroundColor: '#fff',
          border: '1px solid #ededed',

          // styles added to expanded item
          '&[data-active]': {
            backgroundColor: '#ccc',
          },
        },

        chevron: {
          // styles added to chevron when it should rotate
          '&[data-rotate]': {
            transform: 'rotate(-90deg)',
          },
        },
      }}
    >
      {/* ... Accordion items */}
    </Accordion>
  );
}

TypeScript

AccordionProps type exported from @mantine/core is a generic, it accepts boolean type that describes multiple state:

import type { AccordionProps } from '@mantine/core';

type MultipleAccordionProps = AccordionProps<true>;
type DefaultAccordionProps = AccordionProps<false>;

Accessibility

Accordion component follows WAI-ARIA recommendations on accessibility.

Notes

Set order on Accordion component to wrap accordion controls with h2-h6 heading. The following example will wrap controls with h3 tag:

import { Accordion } from '@mantine/core';

function Demo() {
  return <Accordion order={3}>{/* ...items */}</Accordion>;
}

Keyboard interactions

<KeyboardEventsTable data={[ { key: 'ArrowDown', description: 'Moves focus to next item' }, { key: 'ArrowUp', description: 'Moves focus to previous item' }, { key: 'Home', description: 'Moves focus to first item' }, { key: 'End', description: 'Moves focus to last item' }, { key: 'Space/Enter', description: 'Toggles focused item opened state' }, ]} />