Accordion

These accordion components are a very thin wrapper on top of the <DisclosureGroup /> and <Disclosure /> components from react-aria-components.

For more usage details, checkout their docs:

• DisclosureGroup
• Disclosure

Examples

• You can allow multiple accordion items to be expanded at the same time by setting the allowsMultipleExpanded prop on the AccordionGroup component.

• You can control the expanded state of the accordion items by using the expandedItems and onExpandedItemsChange props on the AccordionGroup component.
• By adding an id prop to each Accordion component, you can specify which items are expanded by default and control the expanded state programmatically.

const [expandedKeys, setExpandedKeys] = useState(['accordion-1']);
 
return (
  <AccordionGroup
    expandedKeys={expandedKeys}
    onExpandedChange={setExpandedKeys}
  >
    <Accordion id="accordion-1">
      <AccordionHeader>What is the return policy</AccordionHeader>
      <AccordionPanel>
        <p>...</p>
      </AccordionPanel>
    </Accordion>
    <Accordion id="accordion-2">
      <AccordionHeader>Do you offer customer support?</AccordionHeader>
      <AccordionPanel>
        <p>...</p>
      </AccordionPanel>
    </Accordion>
    <Accordion id="accordion-3">
      <AccordionHeader>How long does shipping take</AccordionHeader>
      <AccordionPanel>
        <p>...</p>
      </AccordionPanel>
    </Accordion>
  </AccordionGroup>
);

Requirements

The following libraries need to be installed:

The following folders need to be copied to your project:

Components

<AccordionGroup />

The <AccordionGroup /> component is the parent component that wraps around all Accordion components. It is based on the <AriaDisclosureGroup /> component from react-aria-components.

Props

<Accordion />

The <Accordion /> component represents a single accordion item.

• It should be wrapped inside an AccordionGroup component.
• It is based on the <AriaDisclosure /> component from react-aria-components.

Props

<AccordionHeader />

The <AccordionHeader /> component represents the header of the accordion item.

• It should be wrapped inside an Accordion component.
• It is the element that the user clicks on to expand or collapse the accordion item.
• It makes use of a custom <DisclosureHeader /> component, which gives it an id to link it to the corresponding AccordionPanel for accessibility purposes.
• It also uses the <DisclosureTrigger /> component, which uses the <Button /> component from react-aria-components to toggle the expanded state of the accordion item.
• Here you can change the icon of the accordion.

Props

<AccordionPanel />

The <AccordionPanel /> component represents the content panel of the accordion item.

• It should be wrapped inside an Accordion component.
• It is shown or hidden based on the expanded state of the accordion item.
• It makes use of a custom <DisclosurePanel /> component, which gives it an aria-labelledby attribute to link it to the corresponding AccordionHeader for accessibility purposes.

Props

Data attributes