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

<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';

function AccordionLabel({ label, image, description }) {
  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() {
  return (
    <Accordion initialItem={-1} iconPosition="right">
      <Accordion.Item label={<AccordionLabel image="./avatar.png" label="Bender Bending Rodríguez" description="..." />}>
        <Text size="sm">{item.content}</Text>
      </Accordion.Item>
      {/* ... other items */}
    </Accordion>
  );
}

Change icons

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

<Accordion icon={<PlusCircledIcon />} disableIconRotation>
  {/* <Accordion.Item /> components */}
</Accordion>

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

<Accordion disableIconRotation>
  <Accordion.Item
    label="Customization"
    icon={
      <ThemeIcon color="violet" variant="light">
        <BlendingModeIcon />
      </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:

Email *

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