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:
Did you know?
Creative Idea No. 1
Creative Idea No. 2
Creative Idea No. 3