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

allowToggle

Description

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

Type
boolean

colorScheme

Description

Color Schemes for Accordion are not implemented in the default theme. You can extend the theme to implement them.

Type
(string & {})

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

size

Description

Sizes for Accordion are not implemented in the default theme. You can extend the theme to implement them.

Type
string

variant

Description

Variants for Accordion are not implemented in the default theme. You can extend the theme to implement them.

Type
string

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

isFocusable

Description

If true, the accordion item will be focusable.

Type
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.

Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel