Accordion

Details about our Accordion component and how to use it.

• Makes use of react-aria-components under the hood, see here. It specifically uses the <DisclosureGroup />, <DisclosureStateContext /> and <Disclosure /> components.
• Meets accessibility standards.
• Supports expanding one item at a time by default.
• Supports allowing multiple expanded items at the same time.
• Supports being fully controlled by the parent component.

One expanded item at a time

<AccordionGroup>
  <Accordion>
    <AccordionHeader>What is the return policy</AccordionHeader>
    <AccordionPanel>
      <p>...</p>
    </AccordionPanel>
  </Accordion>
  <Accordion>
    <AccordionHeader>Do you offer customer support?</AccordionHeader>
    <AccordionPanel>
      <p>...</p>
    </AccordionPanel>
  </Accordion>
</AccordionGroup>

Multiple expanded items at a time

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

<AccordionGroup allowsMultipleExpanded>...</AccordionGroup>

Controlled accordion

• 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(
    () => new Set<AccordionKey>(['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 folder 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