v2.5.1
Discord
Source code

Accordion

Divide content into collapsible sections
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

Components

  • Accordion.Item – utility component to pass data to Accordion component, does not render anything on its own. Do not use outside of Accordion component.
  • Accordion – receives data from AccordionItem content and renders component

Usage

Colors, fonts, shadows and many other parts are customizable to fit your design needs
Configure components appearance and behavior with vast amount of settings or overwrite any part of component styles
With new :focus-visible pseudo-class focus ring appears only when user navigates with keyboard
<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

You can use any react component as label:

Bob is a graphic designer from San Francisco, as stands from his surname, he is a handsome man
Bill works as integrations engineer in a large company. Does something tell you that he likes snakes?
Emily is a DevOps engineer at small regional company called Rob Johnson and sons
import { Group, Avatar, Text, Accordion } from '../../../index';


function AccordionLabel({ name, avatar, job }) {
  return (
    <Group>
      <Avatar src={avatar} radius="xl" />
      <div>
        <Text>{name}</Text>
        <Text size="sm" color="gray">
          {job}
        </Text>
      </div>
    </Group>
  );
}


<Accordion initialItem={-1}>
  <Accordion.Item
    label={<AccordionLabel name="Bob Handsome" job="Graphic Designer" avatar={images[0]} />}
  >
    {description}
  </Accordion.Item>


  {/* ... more items */}
</Accordion>

Styles API

Default Accordion has bare minimum styles to make customization more simple, you can add any additional styles with Styles API:

Colors, fonts, shadows and many other parts are customizable to fit your design needs
Configure components appearance and behavior with vast amount of settings or overwrite any part of component styles
With new :focus-visible pseudo-class focus ring appears only when user navigates with keyboard
import { Accordion, AccordionItem, AccordionProps, createStyles } from '@mantine/core';


const useStyles = createStyles((theme) => ({
  control: {
    fontSize: theme.fontSizes.lg,
  },


  item: {
    border: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]}`,


    '&:first-of-type': {
      borderTopRightRadius: theme.radius.sm,
      borderTopLeftRadius: theme.radius.sm,
    },


    '&:last-of-type': {
      borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4],
      borderBottomRightRadius: theme.radius.sm,
      borderBottomLeftRadius: theme.radius.sm,
    },


    '& + &': {
      borderTop: 'none',
    },
  },


  itemOpened: {
    '& $control': {
      backgroundColor: theme.colors.blue[theme.colorScheme === 'dark' ? 9 : 0],
      color: theme.colorScheme === 'dark' ? theme.white : theme.colors.blue[9],
    },
  },


  contentInner: {
    paddingTop: theme.spacing.md,
  },
}));


function StyledAccordion(props: AccordionProps) {
  const classes = useStyles();
  return <Accordion classNames={classes} {...props} />;
}


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


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


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

Multiple opened items

Set multiple prop on Accordion component to allow any amount of items to be opened at the same time:

Colors, fonts, shadows and many other parts are customizable to fit your design needs
Configure components appearance and behavior with vast amount of settings or overwrite any part of component styles
With new :focus-visible pseudo-class focus ring appears only when user navigates with keyboard
<Accordion multiple>
  {/* ...items */}
</Accordion>

Component state

In most cases you would use uncontrolled Accordion, to change initial opened item use initialItem prop:

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


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

If you need to manage component state on your own provide state and onChange props:

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


function Demo() {
  // Second item will be initially opened
  const [state, onChange] = useState({ 0: false, 1: true, 2: false });
  return <Accordion state={state} onChange={onChange} />;
}

Server side rendering

Component uses use-id hook to generate unique ids and aria- attributes, provide static id prop to prevent props mismatch:

<Accordion /> // -> random id generated both on client and server, props mismatch warning
<Accordion id="my-accordion" /> // -> id is static, no mismatches
Build fully functional accessible web applications with ease
Project
Contribute to MantineChangelogReleases
Community
Join Discord communityFollow on TwitterEmail newsletterGithub discussions
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter