Accordions display a list of high-level options that can expand/collapse to
reveal more information.
Import
Chakra UI exports 5 accordion-related components.
Accordion
: The wrapper that uses cloneElement to pass props to
AccordionItem
children.AccordionItem
: A single accordion item.AccordionButton
: The button that toggles the expand/collapse state of the
accordion item. This button must be wrapped in an element with role heading
.AccordionPanel
: The container for the details to be revealed.AccordionIcon
: A chevron-down
icon that rotates based on the
expanded/collapsed state
import {
Accordion,
AccordionItem,
AccordionButton,
AccordionPanel,
AccordionIcon,
} from '@chakra-ui/react';
Usage
By default, only one item may be expanded and it can only be collapsed again by
expanding another.
Accordion
now supports keyboard navigation between accordion buttons. Pressing
the up
and down
arrow keys will move focus between accordion buttons.
<Accordion>
<AccordionItem>
<h2>
<AccordionButton>
<Box flex='1' textAlign='left'>
Section 1 title
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<h2>
<AccordionButton>
<Box flex='1' textAlign='left'>
Section 2 title
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</AccordionPanel>
</AccordionItem>
</Accordion>
Expand multiple items at once
If you set allowMultiple
to true
then the accordion will permit multiple
items to be expanded at once.
If you pass this prop, ensure that the index
or defaultIndex
prop is an
array.
<Accordion defaultIndex={[0]} allowMultiple>
<AccordionItem>
<h2>
<AccordionButton>
<Box flex='1' textAlign='left'>
Section 1 title
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<h2>
<AccordionButton>
<Box flex='1' textAlign='left'>
Section 2 title
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</AccordionPanel>
</AccordionItem>
</Accordion>
Toggle each accordion item
If you set allowToggle
to true
, any expanded item may be collapsed again.
<Accordion allowToggle>
<AccordionItem>
<h2>
<AccordionButton>
<Box flex='1' textAlign='left'>
Section 1 title
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<h2>
<AccordionButton>
<Box flex='1' textAlign='left'>
Section 2 title
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</AccordionPanel>
</AccordionItem>
</Accordion>
Styling the expanded state
The AccordionButton
component has aria-expanded
set to true
or false
depending on the state of the AccordionItem
. Use the style prop _expanded
to
style this state.
<Accordion>
<AccordionItem>
<h2>
<AccordionButton _expanded={{ bg: 'tomato', color: 'white' }}>
<Box flex='1' textAlign='left'>
Click me to see a different style
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</AccordionPanel>
</AccordionItem>
</Accordion>
Accessing the internal state
If you need access to the internal state of each accordion item, you can use a
render prop. It provides 2 internal state props: isExpanded
and isDisabled
.
<Accordion allowMultiple>
<AccordionItem>
<h2>
<AccordionButton>
<Box flex='1' textAlign='left'>
Section 1 title
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</AccordionPanel>
</AccordionItem>
<AccordionItem>
{({ isExpanded }) => (
<>
<h2>
<AccordionButton>
<Box flex='1' textAlign='left'>
Section 2 title
</Box>
{isExpanded ? (
<MinusIcon fontSize='12px' />
) : (
<AddIcon fontSize='12px' />
)}
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</AccordionPanel>
</>
)}
</AccordionItem>
</Accordion>
Accessibility
Pressing space
or enter
when focus is on the accordion panel header will
toggle (expand or collapse) the accordion.
Props
Accordion Props
Description
If true
, multiple accordion items can be expanded at once.
Description
If true
, any expanded accordion item can be collapsed again.
Description
Color Schemes for Accordion
are not implemented in the default theme. You can extend the theme to implement them.
Description
The initial index(es) of the expanded accordion item
Description
The index(es) of the expanded accordion item
Description
The callback invoked when accordion items are expanded or collapsed.
Type
((expandedIndex: ExpandedIndex) => void)
Description
If true
, height animation and transitions will be disabled.
Description
Sizes for Accordion
are not implemented in the default theme. You can extend the theme to implement them.
Description
Variants for Accordion
are not implemented in the default theme. You can extend the theme to implement them.
AccordionItem Props
Description
A unique id for the accordion item.
Description
If true
, the accordion item will be disabled.
Description
If true
, the accordion item will be focusable.
AccordionButton renders a button
and composes Box
, this means you can style
it by passing the pseudo style props _expanded
, _disabled
, _hover
, etc.
AccordionPanel Props
AccordionPanel renders a div
and composes Collapse
to provide the height
animation.