Accordion

Usage

Accordion allows users to expand and collapse sections of content. It helps manage large amounts of information in a limited space by showing only section headers initially and revealing content upon interaction.

Accordion is commonly used for:

FAQ sections: displaying questions as headers with answers revealed when clicked
Forms: organizing long forms into sections, for example, personal info, shipping, and payment
Menus: nested navigation in sidebars or mobile views

Crisp and refreshing fruit. Apples are known for their versatility and nutritional benefits. They come in a variety of flavors and are great for snacking, baking, or adding to salads.

Variant

Radius

Chevron position

Left

Right

Chevron icon size

Disable chevron rotation

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

function Demo() {
  const items = data.map((item) => (
    <Accordion.Item key={item.value} value={item.value}>
      <Accordion.Control icon={item.emoji}>{item.value}</Accordion.Control>
      <Accordion.Panel>{item.description}</Accordion.Panel>
    </Accordion.Item>
  ));

  return (
    <Accordion order={3} defaultValue="Apples">
      {items}
    </Accordion>
  );
}

order prop

The order prop (used in all demos on this page) sets the heading level for the Accordion.Control root element. According to WAI-ARIA recommendations, it is required to use h2-h6 heading levels to fit correctly within the outline of the page.

All examples on this page use order={3}, which means that all button elements of Accordion.Control are wrapped with an h3 tag (h2 tags are used for the documentation sections).

The order prop is not enforced by the library but is required if your application must meet accessibility standards.

Change chevron

Use the chevron prop to change the chevron icon. When chevron is set, the chevronIconSize prop is ignored. To remove the chevron icon, use chevron={null}.

To customize chevron styles, use Styles API with the data-rotate attribute. This attribute is set when the item is opened if the disableChevronRotation prop is not set.

Example of a custom chevron icon with rotation styles:

Crisp and refreshing fruit. Apples are known for their versatility and nutritional benefits. They come in a variety of flavors and are great for snacking, baking, or adding to salads.

import { PlusIcon } from '@phosphor-icons/react';
import { Accordion } from '@mantine/core';
import { data } from './data';
import classes from './Demo.module.css';

function Demo() {
  const items = data.map((item) => (
    <Accordion.Item key={item.value} value={item.value}>
      <Accordion.Control icon={item.emoji}>{item.value}</Accordion.Control>
      <Accordion.Panel>{item.description}</Accordion.Panel>
    </Accordion.Item>
  ));

  return (
    <Accordion
      defaultValue="Apples"
      classNames={{ chevron: classes.chevron }}
      chevron={<PlusIcon className={classes.icon} />}
      order={3}
    >
      {items}
    </Accordion>
  );
}

Custom control label

You can use any React node as a label for Accordion.Control component. When you use nested elements in Accordion.Control, it is recommended to set aria-label attribute to make the control accessible for screen readers.

import { Flex, Avatar, Text, Accordion } from '@mantine/core';

const charactersList = [
  {
    id: 'bender',
    image: 'https://img.icons8.com/clouds/256/000000/futurama-bender.png',
    label: 'Bender Bending Rodríguez',
    description: 'Fascinated with cooking, though has no sense of taste',
    content: "Bender Bending Rodríguez, (born September 4, 2996), designated Bending Unit 22, and commonly known as Bender, is a bending unit created by a division of MomCorp in Tijuana, Mexico, and his serial number is 2716057. His mugshot id number is 01473. He is Fry's best friend.",
  },

  {
    id: 'carol',
    image: 'https://img.icons8.com/clouds/256/000000/futurama-mom.png',
    label: 'Carol Miller',
    description: 'One of the richest people on Earth',
    content: "Carol Miller (born January 30, 2880), better known as Mom, is the evil chief executive officer and shareholder of 99.7% of Momcorp, one of the largest industrial conglomerates in the universe and the source of most of Earth's robots. She is also one of the main antagonists of the Futurama series.",
  },

  {
    id: 'homer',
    image: 'https://img.icons8.com/clouds/256/000000/homer-simpson.png',
    label: 'Homer Simpson',
    description: 'Overweight, lazy, and often ignorant',
    content: 'Homer Jay Simpson (born May 12) is the main protagonist and one of the five main characters of The Simpsons series(or show). He is the spouse of Marge Simpson and father of Bart, Lisa and Maggie Simpson.',
  },
];

interface AccordionLabelProps {
  label: string;
  image: string;
  description: string;
}

function AccordionLabel({ label, image, description }: AccordionLabelProps) {
  return (
    <Flex component="span" gap="md" align="center" wrap="nowrap">
      <Avatar src={image} radius="xl" size="lg" alt={label} />
      <div>
        <Text span>{label}</Text>
        <Text span display="block" size="sm" c="dimmed" fw={400}>
          {description}
        </Text>
      </div>
    </Flex>
  );
}

function Demo() {
  const items = charactersList.map((item) => (
    <Accordion.Item value={item.id} key={item.label}>
      <Accordion.Control aria-label={item.label}>
        <AccordionLabel {...item} />
      </Accordion.Control>
      <Accordion.Panel>
        <Text size="sm">{item.content}</Text>
      </Accordion.Panel>
    </Accordion.Item>
  ));

  return (
    <Accordion chevronPosition="right" variant="contained">
      {items}
    </Accordion>
  );
}

With icons

Use the icon prop to display any element in the left section of the Accordion.Control:

Content

import { ImageIcon, PrinterIcon, CameraIcon } from '@phosphor-icons/react';
import { Accordion } from '@mantine/core';

function Demo() {
  return (
    <Accordion variant="filled" defaultValue="photos" order={3}>
      <Accordion.Item value="photos">
        <Accordion.Control
          icon={<ImageIcon size={22} color="var(--mantine-color-dimmed)" />}
        >
          Recent photos
        </Accordion.Control>
        <Accordion.Panel>Content</Accordion.Panel>
      </Accordion.Item>

      <Accordion.Item value="print">
        <Accordion.Control
          icon={<PrinterIcon size={22} color="var(--mantine-color-dimmed)" />}
        >
          Print photos
        </Accordion.Control>
        <Accordion.Panel>Content</Accordion.Panel>
      </Accordion.Item>

      <Accordion.Item value="camera">
        <Accordion.Control
          icon={<CameraIcon size={22} color="var(--mantine-color-dimmed)" />}
        >
          CameraIcon settings
        </Accordion.Control>
        <Accordion.Panel>Content</Accordion.Panel>
      </Accordion.Item>
    </Accordion>
  );
}

Change transition

To change transition duration, set transitionDuration prop:

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

function Demo() {
  return (
    <Accordion order={3} transitionDuration={1000}>
      {/* ...content */}
    </Accordion>
  )
}

To disable transitions, set transitionDuration to 0:

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

function Demo() {
  return (
    <Accordion order={3} transitionDuration={0}>
      {/* ...content */}
    </Accordion>
  )
}

Default opened items

For multiple={false}, set defaultValue as string:

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

function Demo() {
  // Second item will be opened by default
  return (
    <Accordion defaultValue="item-2">
      <Accordion.Item value="item-1">{/* item-1 */}</Accordion.Item>
      <Accordion.Item value="item-2">{/* item-2 */}</Accordion.Item>
    </Accordion>
  );
}

For multiple={true}, set defaultValue as an array of strings:

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

function Demo() {
  // Both items are opened by default
  return (
    <Accordion multiple defaultValue={['item-1', 'item-2']}>
      <Accordion.Item value="item-1">{/* item-1 */}</Accordion.Item>
      <Accordion.Item value="item-2">{/* item-2 */}</Accordion.Item>
    </Accordion>
  );
}

Control opened state

For 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">{/* item-1 */}</Accordion.Item>
      <Accordion.Item value="item-2">{/* item-2 */}</Accordion.Item>
    </Accordion>
  );
}

For 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">{/* item-1 */}</Accordion.Item>
      <Accordion.Item value="item-2">{/* item-2 */}</Accordion.Item>
    </Accordion>
  );
}

Compose controls

Putting a button or link inside Accordion.Control is a common mistake when using Accordion. The Accordion.Control root element is a button. Putting interactive elements inside other interactive elements is forbidden – you will receive a DOM validation error from React if you try to implement the following component:

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

// ❌ Incorrect usage: do not do this
function Demo() {
  return (
    <Accordion.Item value="item-1">
      <Accordion.Control>
        <Group>
          <span>Control 1</span>
          <button>My action</button>
        </Group>
      </Accordion.Control>
      <Accordion.Panel>Panel 1</Accordion.Panel>
    </Accordion.Item>
  );
}

Instead of putting interactive elements inside the Accordion.Control, render them next to it. For example, you can add an ActionIcon or Menu to the right side of the original control. If you need to display an interactive element over the Accordion.Control, use position: absolute instead.

import { Accordion, ActionIcon, AccordionControlProps, Center } from '@mantine/core';
import { DotsThreeIcon } from '@phosphor-icons/react';

function AccordionControl(props: AccordionControlProps) {
  return (
    <Center>
      <Accordion.Control {...props} />
      <ActionIcon size="lg" variant="subtle" color="gray" aria-label="More options">
        <DotsThreeIcon size={20} />
      </ActionIcon>
    </Center>
  );
}

function Demo() {
  return (
    <Accordion chevronPosition="left" order={3}>
      <Accordion.Item value="item-1">
        <AccordionControl>Control 1</AccordionControl>
        <Accordion.Panel>Panel 1</Accordion.Panel>
      </Accordion.Item>

      <Accordion.Item value="item-2">
        <AccordionControl>Control 2</AccordionControl>
        <Accordion.Panel>Panel 2</Accordion.Panel>
      </Accordion.Item>

      <Accordion.Item value="item-3">
        <AccordionControl>Control 3</AccordionControl>
        <Accordion.Panel>Panel 3</Accordion.Panel>
      </Accordion.Item>
    </Accordion>
  );
}

Disabled items

Set the disabled prop on the Accordion.Control component to disable it. When you disable items, users cannot activate them with the mouse or keyboard, and arrow key navigation will skip them:

Crisp and refreshing fruit. Apples are known for their versatility and nutritional benefits. They come in a variety of flavors and are great for snacking, baking, or adding to salads.

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

function Demo() {
  const items = data.map((item) => (
    <Accordion.Item key={item.value} value={item.value}>
      <Accordion.Control icon={item.emoji} disabled={item.value === 'Bananas'}>
        {item.value}
      </Accordion.Control>
      <Accordion.Panel>{item.description}</Accordion.Panel>
    </Accordion.Item>
  ));

  return (
    <Accordion defaultValue="Apples" order={3}>
      {items}
    </Accordion>
  );
}

Unstyled Accordion

Set the unstyled prop on the Accordion component to remove all non-essential library styles. Use the unstyled prop to style the component with the Styles API without overriding any styles.

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

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

Styles API

Accordion supports the Styles API; you can add styles to any inner element of the component with the classNames prop. Follow the Styles API documentation to learn more.

Crisp and refreshing fruit. Apples are known for their versatility and nutritional benefits. They come in a variety of flavors and are great for snacking, baking, or adding to salads.

Component Styles API

Hover over selectors to highlight corresponding elements

/*
 * Hover over selectors to apply outline styles
 *
 */

Example of using Styles API to customize Accordion styles:

Crisp and refreshing fruit. Apples are known for their versatility and nutritional benefits. They come in a variety of flavors and are great for snacking, baking, or adding to salads.

import { Accordion } from '@mantine/core';
import { data } from './data';
import classes from './Demo.module.css';

function Demo() {
  const items = data.map((item) => (
    <Accordion.Item key={item.value} value={item.value}>
      <Accordion.Control icon={item.emoji}>{item.value}</Accordion.Control>
      <Accordion.Panel>{item.description}</Accordion.Panel>
    </Accordion.Item>
  ));

  return (
    <Accordion defaultValue="Apples" classNames={classes} variant="filled" order={3}>
      {items}
    </Accordion>
  );
}

TypeScript

The AccordionProps type exported from @mantine/core is a generic that accepts a boolean type describing the multiple state:

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

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

Accessibility

The Accordion component implements the WAI-ARIA accessibility pattern.

Keyboard interactions

Key	Description
`ArrowDown`	Moves focus to next item
`ArrowUp`	Moves focus to previous item
`Home`	Moves focus to first item
`End`	Moves focus to last item
`Space/Enter`	Toggles focused item opened state

Tooltip

Avatar

Apples🍎

Bananas🍌

Broccoli🥦

Apples🍎

Bananas🍌

Broccoli🥦

Bender Bending RodríguezFascinated with cooking, though has no sense of taste

Carol MillerOne of the richest people on Earth

Homer SimpsonOverweight, lazy, and often ignorant

Recent photos

Print photos

CameraIcon settings

Apples🍎

Bananas🍌

Broccoli🥦

Apples🍎

Bananas🍌

Broccoli🥦

Control 1

Control 2

Control 3

Apples🍎

Bananas🍌

Broccoli🥦

Apples🍎

Bananas🍌

Broccoli🥦

Apples🍎

Bananas🍌

Broccoli🥦

Apples🍎

Bananas🍌

Broccoli🥦