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.