Accordion

Usage

import {
  AccordionTrigger,
  AccordionContent,
  Accordion,
  AccordionItem,
} from "@govtechmy/myds-react/accordion";

export default () => (
  <Accordion>
    <AccordionItem>
      <AccordionTrigger></AccordionTrigger>
      <AccordionContent></AccordionContent>
    </AccordionItem>
  </Accordion>
);

Examples

Type

Use the type prop to change how the content should be displayed!

• single: only allow one content to be shown at a time

• multiple: allow multiple contents to be shown at the same time.

Collapsible

Use the collapsible prop to determine whether all the accordion is collapsible! By default, it is set to true. Please note this only works when type="single".

Disabled

The disabled prop exists in both Accordion and AccordionItem components.

Setting disabled to true in Accordion will disable all the AccordionItem components, while in AccordionItem will disable the respective AccordionItem.

Props

Accordion

AccordionItem

AccordionTrigger

AccordionContent