Accordion

Accordions display a list of high-level options that can expand/collapse to reveal more information.

    SourceTheme source@chakra-ui/accordion

Props#

Accordion Props#

allowMultiple

Description

If true, multiple accordion items can be expanded at once.

Type
boolean
Default
false

allowToggle

Description

If true, any expanded accordion item can be collapsed again.

Type
boolean
Default
false

defaultIndex

Description

The initial index(es) of the expanded accordion item

Type
ExpandedIndex

index

Description

The index(es) of the expanded accordion item

Type
ExpandedIndex

onChange

Description

The callback invoked when accordion items are expanded or collapsed.

Type
(expandedIndex: ExpandedIndex) => void

reduceMotion

Description

If true, height animation and transitions will be disabled.

Type
boolean
Default
false

AccordionItem Props#

id

Description

A unique id for the accordion item.

Type
string

isDisabled

Description

If true, the accordion item will be disabled.

Type
boolean
Default
false

isFocusable

Description

If true, the accordion item will be focusable.

Type
boolean
Default
false

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.

Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel