If true
, multiple accordion items can be expanded at once.
Accordion
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 toAccordionItem
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 roleheading
.AccordionPanel
: The container for the details to be revealed.AccordionIcon
: Achevron-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 eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex eacommodo 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 eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex eacommodo 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
ordefaultIndex
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 eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex eacommodo 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 eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex eacommodo 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 eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex eacommodo 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 eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex eacommodo 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 eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex eacommodo 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 eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex eacommodo 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 doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim adminim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip 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#
allowMultiple
allowMultiple
boolean
allowToggle
allowToggle
If true
, any expanded accordion item can be collapsed again.
boolean
colorScheme
colorScheme
Color Schemes for Accordion
are not implemented in the default theme. You can extend the theme to implement them.
(string & {})
defaultIndex
defaultIndex
The initial index(es) of the expanded accordion item
ExpandedIndex
index
index
The index(es) of the expanded accordion item
ExpandedIndex
onChange
onChange
The callback invoked when accordion items are expanded or collapsed.
((expandedIndex: ExpandedIndex) => void)
reduceMotion
reduceMotion
If true
, height animation and transitions will be disabled.
boolean
size
size
Sizes for Accordion
are not implemented in the default theme. You can extend the theme to implement them.
string
variant
variant
Variants for Accordion
are not implemented in the default theme. You can extend the theme to implement them.
string
AccordionItem Props#
id
id
A unique id for the accordion item.
string
isDisabled
isDisabled
If true
, the accordion item will be disabled.
boolean
isFocusable
isFocusable
If true
, the accordion item will be focusable.
boolean
AccordionButton Props#
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.