Accordion

Divide content into collapsible sections
Import

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:

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.
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.
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.
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.
import { Group, Avatar, Text, Accordion } from '../../../index';
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>
{/* ... more items */}
</Accordion>
);
}

Change icons

You can change icons for all items by setting icon prop on Accordion component:

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 icon={<PlusCircledIcon />} disableIconRotation>
{/* <Accordion.Item /> components */}
</Accordion>

Or you can set icon individually for each item:

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 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 /> items */}
</Accordion>

Icon position

Change icon position by setting iconPosition prop, it can be either left (default) or right:

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 iconPosition="right">
{/* ...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, AccordionProps, createStyles } from '@mantine/core';
import { PlusIcon } from '@modulz/radix-icons';
const useStyles = createStyles((theme, _params, getRef) => {
const controlRef = getRef('control');
const iconRef = getRef('icon');
return {
icon: {
ref: iconRef,
},
control: {
ref: controlRef,
border: 0,
opacity: 0.6,
'&:hover': {
backgroundColor: 'transparent',
opacity: 1,
},
},
item: {
borderBottom: 0,
overflow: 'hidden',
transition: `box-shadow 150ms ${theme.transitionTimingFunction}`,
border: '1px solid transparent',
borderRadius: theme.radius.sm,
},
itemOpened: {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.white,
borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[3],
[`& .${controlRef}`]: {
opacity: 1,
},
[`& .${iconRef}`]: {
transform: 'rotate(45deg)',
},
},
content: {
paddingLeft: 0,
},
};
});
function StyledAccordion(props: AccordionProps) {
const { classes } = useStyles();
return <Accordion classNames={classes} icon={<PlusIcon />} {...props} />;
}
function Demo() {
return (
<StyledAccordion>
{/* <Accordion.Item /> components */}
</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} />;
}

TypeScript

Component props type

Import component props type:

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

AccordionProps extends React.ComponentPropsWithoutRef<'div'>, all other props are available under Component props tab.

AccordionStylesNames type

AccordionStylesNames type is a union with Accordion Styles API names:

import type { AccordionStylesNames } from '@mantine/core';
const accordionClasses: Partial<Record<AccordionStylesNames, 'string'>> = {
item: 'accordion-item',
itemOpened: 'accordion-itemOpened',
};
<Accordion classNames={accordionClasses} />;

See full styles descriptions list under Styles API tab.

Build fully functional accessible web applications faster than ever
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