Accordion

Divide content into collapsible sections

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

Colors, fonts, shadows and many other parts are customizable to fit your design needs

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

function Demo() {
  return (
    <Accordion>
      <Accordion.Item label="Customization">
        Colors, fonts, shadows and many other parts are customizable to fit your design needs
      </Accordion.Item>

      <Accordion.Item label="Flexibility">
        Configure components appearance and behavior with vast amount of settings or overwrite any part of component styles
      </Accordion.Item>

      <Accordion.Item label="No annoying focus ring">
        With new :focus-visible pseudo-class focus ring appears only when user navigates with keyboard
      </Accordion.Item>
    </Accordion>
  );
}

Change labels

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

const charactersList = [
  {
    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.",
  },

  {
    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.",
  },
  {
    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.',
  },
  {
    image: 'https://img.icons8.com/clouds/256/000000/spongebob-squarepants.png',
    label: 'Spongebob Squarepants',
    description: 'Not just a sponge',
    content: 'SpongeBob is a childish and joyful sea sponge who lives in a pineapple with his pet snail Gary in the underwater city of Bikini Bottom. He works as a fry cook at the Krusty Krab, a job which he is exceptionally skilled at and enjoys thoroughly. ',
  },
]

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

function AccordionLabel({ label, image, description }: AccordionLabelProps) {
  return (
    <Group noWrap>
      <Avatar src={image} radius="xl" size="lg" />
      <div>
        <Text>{label}</Text>
        <Text size="sm" color="dimmed" weight={400}>
          {description}
        </Text>
      </div>
    </Group>
  );
}

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

  return (
    <Accordion initialItem={-1} iconPosition="right">
      {items}
    </Accordion>
  );
}

Change icons

To change icon for all items set icon prop on Accordion component:

import { Accordion } from '@mantine/core';
import { CirclePlus } from 'tabler-icons-react';

function Demo() {
  return (
    <Accordion icon={<CirclePlus size={16} />} disableIconRotation>
      {/* <Accordion.Item /> components */}
    </Accordion>
  );
}

To change icon individually for each item, set icon prop on Accordion.Item component:

import { ThemeIcon, Accordion } from '@mantine/core';
import { Palette } from 'tabler-icons-react';

function Demo() {
  return (
    <Accordion disableIconRotation>
      <Accordion.Item
        label="Customization"
        icon={
          <ThemeIcon color="violet" variant="light">
            <Palette size={14} />
          </ThemeIcon>
        }
      >
        Colors, fonts, shadows and many other parts are customizable to fit your design needs
      </Accordion.Item>

      {/* ...other <Accordion.Item /> */}
    </Accordion>
  )
}

Change transition

To change transition duration, set transitionDuration prop:

<Accordion transitionDuration={1000} /> // -> 1000ms transition duration

To disable transitions, set transitionDuration to 0:

<Accordion transitionDuration={0} />

Customize styles

By default, Accordion has bare minimum styles to make customization simple, add additional styles with Styles API:

Colors, fonts, shadows and many other parts are customizable to fit your design needs

Control state

In most cases, Accordion can be uncontrolled, to change initial opened item use initialItem prop:

// -> Third element will be opened initially
<Accordion initialItem={2} />;

// -> No element will be opened initially (default)
<Accordion initialItem={-1} />;

In more advanced cases, Accordion state can be controlled with useAccordionState hook:

Full name

Your message

Get control ref

Use controlRef prop on Accordion.Item component to get control button ref:

import { useRef } from 'react';

function Demo() {
  const ref = useRef<HTMLButtonElement>();
  return (
    <Accordion>
      <Accordion.Item label="First item" controlRef={ref} />
    </Accordion>
  );
}

Accessibility

Accordion component is accessible by default, it follows WAI ARIA guidelines:

All controls are included in Tab sequence
Up and Down arrows move focus to previous/next control
Item body has role="region" attribute
Item control has aria-expanded, aria-controls, aria-labelledby attributes
When user prefers to reduce motion, transitionDuration is automatically set to 0

To make the component visible for screen reader, include descriptive in Accordion.Item label:

<Accordion.Item label={<div />}>Content</Accordion.Item> // -> not ok
<Accordion.Item label="First item">Content</Accordion.Item> // -> ok
<Accordion.Item label={<div>First item</div>}>Content</Accordion.Item> // -> ok