Chakra-UI

I♥️Components

Accordion

|

Chakra Docs

|

⦾ The Accordion component in Chakra UI is a versatile component that allows you to provide sections of content that can expand or collapse to reveal more information. It can be used to display a large amount of content in a compact and orderly manner.

The Accordion component consists of several main parts:

  • Accordion: This is the main wrapper that holds all the accordion items.
  • AccordionItem: This represents a single section of the accordion. Each AccordionItem consists of an AccordionButton and an AccordionPanel.
  • AccordionButton: This is the part of the AccordionItem that users can interact with to expand or collapse the AccordionPanel.
  • AccordionPanel: This is the content area that is shown or hidden when a user interacts with the AccordionButton.

Some of the key features of the Accordion component include:

  • allowMultiple: This prop allows more than one AccordionPanel to be open at the same time.
  • allowToggle: This prop allows an AccordionPanel to be collapsible. If this is set to true, clicking an open AccordionButton will collapse its AccordionPanel.
  • defaultIndex: This prop allows you to define which AccordionItem(s) should be open by default when the component is first rendered.

The Accordion component in Chakra UI is built with inclusivity in mind. The proper ARIA attributes are automatically applied, and the keyboard navigation (using the arrow keys, Home, and End buttons) is handled out of the box. This makes the Accordion component a robust choice for displaying chunked content or information in a more compact, user-friendly format.

Pressing space or enter when focus is on the accordion panel header will toggle (expand or collapse) the accordion.

The Accordion components can be imported as follows:

Examples

Default Settings

⦾ By default, only one item may be expanded and it can only be collapsed again by expanding another. Pressing the up and down arrow keys will move focus between accordion buttons.

Code

AllowMultiple

⦾ If you set allowMultiple to true then the accordion will permit multiple items to be expanded at once.

Code

AllowToggle

⦾ If you set allowToggle to true, any expanded item may be collapsed again.

Code

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.

Code

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.

Code

Did you know?

Creative Idea No. 1

Nested Accordions: you can nest Accordions within Accordions for more complex data organization. It's a handy trick when you need to present multilayered information in a clear and orderly manner.

Code

Creative Idea No. 2

One creative idea when working with Accordions could be to replace the default AccordionIcon with custom icons for an expanded and collapsed state. In the following example, instead of the default accordion icon, we're using the ArrowDownIcon from Chakra UI's inbuilt icons. It's important to note that to show a different icon when the accordion item is collapsed, it is necessary to create a custom AccordionButton component.

Code

Creative Idea No. 3

Embedding components in an accordion: you can embed any component in an accordion panel. In the following example, there is an embedded input form and button within the accordion.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.