Accordion

Basic usage

The Accordion is highly customizable and has few styles from the start.

Invite team members

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec lectus sed sem porttitor viverra. Vestibulum magna leo.

Make a first payment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec lectus sed sem porttitor viverra. Vestibulum magna leo.

const accordionItems = [
  "Invite team members",
  "Make a first payment",
  "Order physical cards",
];

const Demo = () => {
  return (
    <Accordion>
      {accordionItems.map((accordionItem) => (
        <AccordionItem
          key={accordionItem}
          renderHeader={() => <div>{accordionItem}</div>}
        >
          <div className="p-24 pt-8 text-primary">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec
            lectus sed sem porttitor viverra. Vestibulum magna leo.
          </div>
        </AccordionItem>
      ))}
    </Accordion>
  );
};

Default expanded item

The open prop lets you select which item should be expanded.

In an Accordion group, only one AccordionItem can be expanded at a time. If multiple AccordionItem components have the open prop set to true, the last one will be the one that is open.

If you need to have multiple AccordionItem components open at the same time, you should use the AccordionItem components directly without wrapping them in an Accordion component.

Invite team members

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec lectus sed sem porttitor viverra. Vestibulum magna leo.

Make a first payment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec lectus sed sem porttitor viverra. Vestibulum magna leo.

<Accordion className="w-full text-primary">
  <AccordionItem
    open
    renderHeader={() => "Invite team members"}
  >
    <div className="p-24 pt-8">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec lectus
      sed sem porttitor viverra. Vestibulum magna leo.
    </div>
  </AccordionItem>
  <AccordionItem renderHeader={() => "Make a first payment"}>
    <div className="p-24 pt-8">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec lectus
      sed sem porttitor viverra. Vestibulum magna leo.
    </div>
  </AccordionItem>
</Accordion>

Open / Close accordion

To control an AccordionItem, use the useState hook and set the open prop to the desired state.

Invite team members

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec lectus sed sem porttitor viverra. Vestibulum magna leo.

function Demo() {
  const [indexOpen, setIndexOpen] = useState("close"); 

  return (
    <>
      <Button
        variant="primaryBrand"
        text="Open accordion"
        onClick={() => setIndexOpen("open")}
      />
      <Button
        variant="primaryBrand"
        text="Close accordion"
        onClick={() => setIndexOpen("close")}
      />
      <Accordion className="w-full overflow-hidden">
        <AccordionItem
          open={"open" === indexOpen} 
          renderHeader={() => "Invite team members"}
        >
          <div className="p-24 pt-8 text-primary">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec
            lectus sed sem porttitor viverra. Vestibulum magna leo.
          </div>
        </AccordionItem>
      </Accordion>
    </>
  );
}

Controlled state

The onToggle prop lets you get the state of an AccordionItem component.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec lectus sed sem porttitor viverra. Vestibulum magna leo.

const Demo = () => {
  const [openItem, setOpenItem] = useState(false); 

  return (
    <AccordionItem
      className="w-full"
      open={openItem} 
      onToggle={(open) => setOpenItem(open)}
      renderHeader={() => (openItem ? "Show less" : "Show more")} 
    >
      <div className="p-24 pt-8 text-primary">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec
        lectus sed sem porttitor viverra. Vestibulum magna leo.
      </div>
    </AccordionItem>
  );
};