group | package | title | order | slug | category | description | props | import | source | docs | styles | |||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
mantine-core |
@mantine/core |
Accordion |
1 |
/core/accordion/ |
data-display |
Divide content into collapsible sections |
|
import { Accordion } from '@mantine/core'; |
mantine-core/src/Accordion/Accordion.tsx |
core/Accordion.mdx |
|
import { AccordionDemos } from '@mantine/demos';
<Demo data={AccordionDemos.label} demoProps={{ toggle: true }} />
<Demo data={AccordionDemos.icons} demoProps={{ toggle: true }} />
To change transition duration, set transitionDuration
prop:
To disable transitions, set transitionDuration
to 0:
When 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">
<Accordion.Control>control-1</Accordion.Control>
<Accordion.Panel>panel-1</Accordion.Panel>
</Accordion.Item>
<Accordion.Item value="item-2">
<Accordion.Control>control-2</Accordion.Control>
<Accordion.Panel>panel-2</Accordion.Panel>
</Accordion.Item>
</Accordion>
);
}
When 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">
<Accordion.Control>control-1</Accordion.Control>
<Accordion.Panel>panel-1</Accordion.Panel>
</Accordion.Item>
<Accordion.Item value="item-2">
<Accordion.Control>control-2</Accordion.Control>
<Accordion.Panel>panel-2</Accordion.Panel>
</Accordion.Item>
</Accordion>
);
}
You can add any additional elements that will be displayed next to Accordion.Control
,
for example, you can add ActionIcon or Menu:
Set disabled
prop on Accordion.Control
component to disable it.
Disabled items cannot be activated with mouse or keyboard, will be skipped when user navigates with arrow keys:
<Demo data={AccordionDemos.disabled} demoProps={{ toggle: true }} />
Set unstyled
prop on Accordion component to remove all non-essential library styles.
It can be used to style component with Styles API without overriding any styles.
<Demo data={AccordionDemos.unstyled} demoProps={{ toggle: true }} />
Use Styles API to customize Accordion styles:
<Demo data={AccordionDemos.stylesApi} demoProps={{ toggle: true }} />
Accordion elements have data-
attributes that can be used with Styles API:
data-active
attribute is added toAccordion.Item
root element when associated panel is expandeddata-rotate
attribute is added to chevron icon when icon should rotate (controlled bydisableChevronRotation
and expanded state of associated panel)
import { Accordion } from '@mantine/core';
function Demo() {
return (
<Accordion
styles={{
item: {
// styles added to all items
backgroundColor: '#fff',
border: '1px solid #ededed',
// styles added to expanded item
'&[data-active]': {
backgroundColor: '#ccc',
},
},
chevron: {
// styles added to chevron when it should rotate
'&[data-rotate]': {
transform: 'rotate(-90deg)',
},
},
}}
>
{/* ... Accordion items */}
</Accordion>
);
}
AccordionProps
type exported from @mantine/core
is a generic, it accepts boolean type that
describes multiple
state:
import type { AccordionProps } from '@mantine/core';
type MultipleAccordionProps = AccordionProps<true>;
type DefaultAccordionProps = AccordionProps<false>;
Accordion component follows WAI-ARIA recommendations on accessibility.
Set order
on Accordion
component to wrap accordion controls with h2-h6 heading.
The following example will wrap controls with h3 tag:
import { Accordion } from '@mantine/core';
function Demo() {
return <Accordion order={3}>{/* ...items */}</Accordion>;
}
<KeyboardEventsTable data={[ { key: 'ArrowDown', description: 'Moves focus to next item' }, { key: 'ArrowUp', description: 'Moves focus to previous item' }, { key: 'Home', description: 'Moves focus to first item' }, { key: 'End', description: 'Moves focus to last item' }, { key: 'Space/Enter', description: 'Toggles focused item opened state' }, ]} />